网页设计代码全过程网站优化联系

使用V-View点击图片进行预览：

npm install v-viewer --save

在main.js进行引入

在图片下方会有 轮播箭头下一张上一张等，因此要用配置来关闭。    

import Viewer from 'v-viewer' // viewer.js一种图片预览处理工具
import 'viewerjs/dist/viewer.css' 
Vue.use(Viewer, {defaultOptions: {'zIndex': 9999,'inline': false, // 启用 inline 模式'button': true, // 显示右上角关闭按钮'navbar': true, // 显示缩略图导航 'title': false // 显示当前图片的标题}
})

使用方法：

这里是因为我的需求是直接点击图片触发，因此需要隐藏。

    <el-imagestyle="margin-bottom: 40px":src="stepSix"@click="tpDialogOpen(stepSix)"></el-image>tpDialogOpen会将图片地址传给v-view

   <viewer :images="[srcPrew]"><img id="myPrew" :src="srcPrew" style="width: 100%" v-show="hidden" /></viewer>