1.在vue项目中安装v-viewer

使用npm安装：

npm install v-viewer

2.在vue中的main.js引入：

importViewerfrom'v-viewer'import'viewerjs/dist/viewer.css'Vue.use(Viewer);Viewer.setDefaults({Options:{"inline":true,"button":true,"navbar":true,"title":true,"toolbar":true,"tooltip":true,"movable":true,"zoomable":true,"rotatable":true,"scalable":true,"transition":true,"fullscreen":true,"keyboard":true,"url":"data-source"}});

3.在项目中使用v-viewer

<viewer:images="fiellists"><imgv-for="(imgItem,imgIndex)infiellists":key="imgIndex"class="previewImg":src="imgItem.file"alt=""width="80"height="80"/></viewer>

4.效果：

更多详细内容可以查看：//08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/