[toc] ### 1. 安裝v-viewer插件 ``` npm install v-viewer --save ``` ### 2. 在main.js文件內引入v-viewer ``` import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer' import Vue from 'vue' Vue.use(Viewer) ``` ### 3. 使用v-viewer插件實現圖片的預覽功能 ``` //index.vue <div class="d-none images" v-viewer> <img v-for="(src,index) in images" :src="src" :key="index"> </div> //data里面定義images images : ["https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg","https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/2.jpg"], //media-list.vue <div class="border-bottom px-3 py-2 file-list" @click="clickEvent"> clickEvent(){ this.$emit("on-event",{ type : "image", url: this.item.url }) } //index.vue case "image" : const viewer = this.$el.querySelector('.images').$viewer viewer.show() break; ``` ### 4.判斷如果點擊的是圖片才能調用圖片預覽方法 ``` //media-list.vue clickEvent(){ if(this.item.type === "image"){ this.$emit("on-event",{ type : "image", url: this.item.url }) } } ``` ### 5. 實現點擊預覽對應的圖片 ``` //index.vue //刪除原來data里面定義images computed: { images(){ let urls = []; this.list.forEach((item,index)=>{ if(item.type === "image"){ urls.push(item.url) } }) return urls; }, checkList() { return this.list.filter(item => item.checked) }, checkedAllStatus() { return this.checkList.length === this.list.length }, checkedCount() { return this.checkList.length } }, case "image" : const viewer = this.$el.querySelector('.images').$viewer let index =this.images.findIndex(url=>url === e.url) viewer.view(index) viewer.show() break; ```