因项目需求，需要实现点击图片可以预览放大旋转切换等，这个时候！！自己写比较麻烦，所以选择了站在巨人的肩膀上...
插件 viewer.js，GitHub地址：https://github.com/fengyuanchen/viewerjs
它的功能很全面，各位有需求请移步文档~~以下简单示例：
安装：
npm install viewerjs引入：
import Vue from 'vue';
import Viewer from 'v-viewer'；
import 'viewerjs/dist/viewer.css'；代码中使用：
<template>
<div id="imgTooles">
<ul>
<li v-for="(item,index)in this.imgList " :key="index">
<img :data-original='`${item}`' :src="item">
</li>
</ul>
</div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
mounted(){
this.getInfo();
},
data(){
return{
imgList : [],
}
},
methods:{
getInfo(){
//发送ajax请求图片list
//...
//this.imgList = res.data.list;
//重点：要在图片已经请求到再调用！！
this.$nextTick(() => {
this.initImageTools();
});
},
initImageTools(){
//初始化 viewerjs
const ViewerDom = document.getElementById('imgTooles');
const viewer = new Viewer(ViewerDom, {
url: "data-original",
show: function(){
viewer.update();
}
});
},
}
}
</script>
总结：如dom结构为js动态插入，初始化会失效，此时应将初始化操作放在dom结构插入完成后进行 。
近期使用遇到一些问题，比如图片点击两次才能打开；或者报错
Cannot read property 'update' of undefined,所以优化了一下。
思路是，在点击图片的时候再创建实例，图片关闭，销毁实例。
methods:{
getInfo(){
//---
},
//去掉getInfo里的调用
initImageTools(){
//如果绑定了ref="imgTooles"，也可以这样写
const viewer = new Viewer(this.$refs.imgTooles, {
url: "data-original",
show: function (){
viewer.update();
},
hide:function(){ //在图片消失的时候销毁viewer
viewer.destroy()
}
});
},
//点击图片创建实例 点击事件绑定在图片上
imageChange(e){
if (e.target.nodeName == 'IMG') {
this.initImageTools();
}
},
},
