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