vue-photo-preview插件图片预览插件支持缩放踩坑问题

一、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的图片或者加载失败的图片全部删除掉。

转载于：https://segmentfault.com/a/1190000039820041?utm_source=sf-similar-article