Vue + ElementUI表格内实现图片点击放大效果的两种方式

方式一：使用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一定要一个数组，否则报错 -->
    <img
      v-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'
],

说明：

参考：

https://blog.csdn.net/AdminGuan/article/details/103574434

https://www.cnblogs.com/chenziyu/p/10270934.html