[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; ```