关于vue.js:vuephotopreview插件踩坑问题

一、Vue vue-photo-preview插件的应用

1.装置依赖
npm install vue-photo-preview --save
2.在全局引入(main.js)

 import preview from 'vue-photo-preview'
 import 'vue-photo-preview/dist/skin.css'
 Vue.use(preview)

3.如果有须要扭转默认配置的

 import preview from 'vue-photo-preview'
 import 'vue-photo-preview/dist/skin.css'
 var option = {
   maxSpreadZoom: 1, // 管制预览图最大的倍数,默认是2倍,我这里改成了原图
  fullscreenEl: false, //管制是否显示右上角全屏按钮
   closeEl: false, //管制是否显示右上角敞开按钮
   tapToClose: true, //点击滑动区域应敞开图库
   shareEl: false, //管制是否显示分享按钮
   zoomEl: false, //管制是否显示放大放大按钮
   counterEl: false, //管制是否显示左上角图片数量按钮
   arrowEl: true,  //管制如图的左右箭头(pc浏览器模拟手机时)
   tapToToggleControls: true, //点击应切换控件的可见性
   clickToCloseNonZoomable: true //点击图片应敞开图库,仅当图像小于视口的大小时
 }
 Vue.use(preview, option)

4.我的项目中应用

 <img style="width: 50px" src="https://sppxpp.cn/avatar.jpg" preview="0" v-for="(i,index) in d" />
 #preview 雷同则示意同一组照片

5.如果图片数据是后盾申请的

 #在数据加载结束之后调用this.$previewRefresh()
 this.$previewRefresh()

二、采坑问题:

问题一:
当我应用循环 一组图片的时候,当其中的 一张图片报 404或者加载失败后你会发现整组图片的点击放大查看工夫会全副生效,

解决办法:为图片 绑定 error事件,只有发现404的图片或者加载失败的图片全副删除掉。

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

阿里云限时活动-2核2G-5M带宽-40-100G SSD服务器,特惠价86元/年(原价724元/年,限时99元续购三次),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据