解决vue-photo-preview 异步图片放大失效的问题


Posted in Javascript onJuly 29, 2020

官方提供的异步图片加载的话,在数据加载完之后执行this.$previewRefresh(),但我这里测试的并不好使,最后解决的方式是加transition,代码截图如下:

解决vue-photo-preview 异步图片放大失效的问题

注意v-if一定要在transtion上加,v-if一定要有,fade的css如下:

解决vue-photo-preview 异步图片放大失效的问题

补充知识: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 异步图片放大失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的正则表达式简明总结
Apr 04 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
JS触摸与手势事件详解
May 09 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 #Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 #Javascript
vuex管理状态仓库使用详解
Jul 29 #Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 #Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 #Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 #Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
学习ExtJS Column布局
2009/10/08 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
xml转json的js代码
2012/08/28 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Python类的专用方法实例分析
2015/01/09 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
python中怎么表示空值
2020/06/19 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
C语言编程题
2015/03/09 面试题
什么是设计模式
2012/06/17 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
小学生暑假家长评语
2014/04/17 职场文书
收款委托书
2014/10/14 职场文书
培训班通知
2015/04/25 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
导游词之西递宏村
2019/12/10 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
python实现的web监控系统
2021/04/27 Python