因項目需求,需要實現(xiàn)點擊圖片可以預覽放大旋轉(zhuǎn)切換等撑教,這個時候3铡醉拓!自己寫比較麻煩伟姐,所以選擇了站在巨人的肩膀上...
插件 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)用E盼狻秆乳!
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();
}
},
},