因項目需求，需要實現(xiàn)點擊圖片可以預覽放大旋轉(zhuǎn)切換等撑教，這個時候３铡醉拓！自己寫比較麻煩伟姐，所以選擇了站在巨人的肩膀上...
插件 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(){
//發(fā)送ajax請求圖片list
//...
//this.imgList = res.data.list;
//重點：要在圖片已經(jīng)請求到再調(diào)用Ｅ盼狻秆乳！
this.$nextTick(() => {
this.initImageTools();
});
},
initImageTools(){
//初始化 viewerjs
const ViewerDom = document.getElementById('imgTooles');
const viewer = new Viewer(ViewerDom, {
url: "data-original",
show: function(){
viewer.update();
}
});
},
}
}
</script>
總結(jié)：如dom結(jié)構(gòu)為js動態(tài)插入，初始化會失效钻哩，此時應將初始化操作放在dom結(jié)構(gòu)插入完成后進行 屹堰。
近期使用遇到一些問題，比如圖片點擊兩次才能打開街氢；或者報錯
Cannot read property 'update' of undefined,所以優(yōu)化了一下扯键。
思路是，在點擊圖片的時候再創(chuàng)建實例珊肃，圖片關(guān)閉荣刑，銷毀實例。
methods:{
getInfo(){
//---
},
//去掉getInfo里的調(diào)用
initImageTools(){
//如果綁定了ref="imgTooles"伦乔，也可以這樣寫
const viewer = new Viewer(this.$refs.imgTooles, {
url: "data-original",
show: function (){
viewer.update();
},
hide:function(){ //在圖片消失的時候銷毀viewer
viewer.destroy()
}
});
},
//點擊圖片創(chuàng)建實例 點擊事件綁定在圖片上
imageChange(e){
if (e.target.nodeName == 'IMG') {
this.initImageTools();
}
},
},
