vue-photo-preview 异常处理

介绍

   一个好看、好用的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)
    },

总结 【喜欢您就收藏分享或来搞哈！】