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

方式一：使用el-popover弹出框<el-table-column label="物品图片" header-align="center" align="center"><template slot-scope="scope"><el-popover placement="top-start" trigger="click"> &l...

UserGuan

14893人浏览 · 2019-12-17 09:43:52

UserGuan · 2019-12-17 09:43:52 发布

方式一：使用el-popover弹出框

<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>

trigger属性用于设置何时触发Popover(弹出框)属性值有：hover、click、focus 和 manual

style="cursor:pointer"：当鼠标放上去时让img标签出现小手状态

方式二：使用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'
],

说明：

名称	默认值	说明
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