解决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实现分割提取页面所需内容
May 09 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
易被忽视的js事件问题总结
May 14 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
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判断当前用户已在别处登录的方法
2015/01/06 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python查找第k小元素代码分享
2013/12/18 Python
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python读取word文本操作详解
2018/01/22 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python中qutip用法示例详解
2020/10/02 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
少儿节目主持串词
2014/04/02 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
公司内部升职自荐信
2015/03/27 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
商场营业员岗位职责
2015/04/14 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL
JS高级程序设计之class继承重点详解
2022/07/07 Javascript