方式一：使用el-popover弹出框
trigger属性用于设置何时触发Popover(弹出框)属性值有：hover、click、focus 和 manual
style="cursor:pointer"：当鼠标放上去时让img标签出现小手状态
<el-table-column label="物品图片" header-align="center" align="center"><template slot-scope="scope"><el-popover placement="top-start" trigger="click"> <!--trigger属性值：hover、click、focus 和 manual--><a :href="scope.row.goodsImg" target="_blank" title="查看最大化图片"><img :src="scope.row.goodsImg" style="width: 300px;height: 300px"></a><img slot="reference" :src="scope.row.goodsImg" style="width: 50px;height: 50px; cursor:pointer"></el-popover></template> </el-table-column>
方式二：使用v-viewer插件
一、安装依赖：在项目目录文件中进入安装
npm install v-viewer --save
二、全局引入：在项目目录下 ——> src文件夹下 ——> main.js进行全局引入
import Vue from 'vue'
import Viewer from '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'}
})
三、使用：在想要的组件中进行使用
单张图片方式
<viewer><img:src="scope.row.goodsImg"style="width: 50px;height: 50px; cursor:pointer"> </viewer>// 或 <div v-viewer><img:src="scope.row.goodsImg"style="width: 50px;height: 50px; cursor:pointer"> </div>
多张图片方式
<div><viewer :images="signImages"><!-- signImages一定要一个数组，否则报错 --><imgv-for="(src,index) in signImages":src="src":key="index"width="50"></viewer> </div><!-- signImages数组放在 export default ——> data() ——> return 里面 --> signImages: ['https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3d9fc10fa3014c08063b2ea53a7a025b/359b033b5bb5c9eac1754f45df39b6003bf3b396.jpg','https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg','https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=7ecc7f20ae0f4bfb93d09854334e788f/10dfa9ec8a1363279e1ed28c9b8fa0ec09fac79a.jpg' ],
说明：
| 名称 | 默认值 | 说明 |
|---|---|---|
| inline | false | 启用 inline 模式 |
| button | true | 显示右上角关闭按钮 |
| navbar | true | 显示缩略图导航 |
| title | true | 显示当前图片的标题 |
| toolbar | true | 显示工具栏 |
| tooltip | true | 显示缩放百分比 |
| movable | true | 图片是否可移动 |
| zoomable | true | 图片是否可缩放 |
| rotatable | true | 图片是否可旋转 |
| scalable | true | 图片是否可翻转 |
| transition | true | 使用 CSS3 过度 |
| fullscreen | true | 播放时是否全屏 |
| keyboard | true | 是否支持键盘 |
| url | src | 设置大图片的 url |
参考：
https://blog.csdn.net/AdminGuan/article/details/103574434
https://www.cnblogs.com/chenziyu/p/10270934.html
名称默认值说明inlinefalse启用 inline 模式buttontrue显示右上角关闭按钮navbartrue显示缩略图导航titletrue显示当前图片的标题toolbartrue显示工具栏tooltiptrue显示缩放百分比movabletrue图片是否可移动zoomabletrue图片是否可缩放rotatabletrue图片是否可旋转scalabletrue图片是否可翻转transitiontrue使用 CSS3 过度fullscreentrue播放时是否全屏keyboardtrue是否支持键盘urlsrc设置大图片的 url————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 原文链接：https://blog.csdn.net/AdminGuan/article/details/103574434
