解决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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
js控制frameSet示例
Sep 10 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 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设计模式 Facade(外观模式)
2011/06/26 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
实例解析php的数据类型
2018/10/24 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Python程序语言快速上手教程
2012/07/18 Python
Cpy和Python的效率对比
2015/03/20 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
什么是会话Bean
2015/05/14 面试题
医学护理系毕业生求职信
2013/10/01 职场文书
买房委托公证书
2014/04/08 职场文书
质量承诺书格式
2014/05/20 职场文书
社会实践活动总结范文
2014/07/03 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书