-
安裝:
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"
});
},
}
}
</script>
總結:如dom結構爲js動態插入,初始化會失效,此時應將初始化操作放在dom結構插入完成後進行 。