解决vue-photo-preview 异步图片放大失效的问题
更新时间：2020年07月29日 11:48:37 作者：lizhen_software
这篇文章主要介绍了解决vue-photo-preview 异步图片放大失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
官方提供的异步图片加载的话，在数据加载完之后执行this.$previewRefresh()，但我这里测试的并不好使，最后解决的方式是加transition，代码截图如下：
注意v-if一定要在transtion上加，v-if一定要有，fade的css如下：
补充知识：vue-cli项目使用vue-picture-preview图片预览组件
一、下载安装
npm install --save vue-picture-preview-extend npm install --save vue-picture-preview // 如果安装了cnpm，推荐国内用户使用cnpm进行安装 cnpm install --save vue-picture-preview-extend cnpm install --save vue-picture-preview
二、配置
// 在 main.js 添加以下代码 import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview)
三、使用
<!-- 在app.vue添加lg-preview组件 --> <div id="app"> <router-view></router-view> <lg-preview></lg-preview> </div> <!-- 给img标签添加v-preview属性，放入图片路径就能使用了 --> <img v-preview="img.url" :src="img.url" >
以上这篇解决vue-photo-preview 异步图片放大失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue的主要思想是组件化开发,路由用来配置组件对应展示路径,本文给大家介绍vue中路由router配置步骤,创建路由文件——使用路由——配置路由出口,使路由配置内容展示在页面上,感兴趣的朋友跟随小编一起看看吧2023-12-12
这篇文章主要介绍了Vue 构造选项 - 进阶使用说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
本篇文章主要介绍了vue-cli如何引入bootstrap工具的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
Vue.js 在其运行过程中会将模板编译成虚拟 DOM (VNode),然后再将 VNode 渲染成实际的 DOM 节点,这个过程是由 Vue 内部的编译器和渲染系统完成的,本文给大家介绍了Vue3中虚拟dom转成真实dom的过程,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了多个vue项目实现共用一个node-modules文件夹，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue.js和Vue.runtime.js区别浅析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
在实际应用场景中,假如有一个下载或者导出请求,数据量非常大的情况下,接口响应的会很慢,这时候我我们想中断请求,该怎么做呢？本文给大家介绍了axios请求中断的几种方法,需要的朋友可以参考下2024-10-10
这篇文章主要为大家详细介绍了vue中实现路由鉴权和不同用户登录的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要介绍了vue-loader中引入模板预处理器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论