vue-photo-preview 异常处理
2020-09-18 本文已影响0人
Jabo
介绍
一个好看、好用的Vue图片预览插件
安装
npm intall vue-photo-preview --save
使用
// 在main.js配置引用
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
# html
//在img标签添加preview属性 preview值相同即表示为同一组
<img src="xxx.jpg" preview="0" preview-text="描述文字">
//分组
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">
<img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="缩略图与大图模式">
//大图查看 large标签填写大图路径 （插件的思路是 img的src默认为缩略图），如不填写large，则展示src
<img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="描述文字">
异常处理
1、 异步数据加载失效
//如果图片是异步生成的，在图片数据更新后调用：
this.$previewRefresh()
2、一组图片的时候，当其中的 一张图片报 404或者加载失败后你会发现整组图片的点击放大查看时间会全部失效
//解决方法：为图片 绑定 error事件，只要发现404的图片或者加载失败的图片全部删除掉。
//html
<img v-if="item.violationPic" preview="1" :src="item.violationPic" alt="" @error="errorImg(index)" />
// js
errorImg(index){
this.tableData[index].violationPic = '';
// 这里要延时处理
setTimeout(()=>{
this.$previewRefresh();
},1000)
},
