Vue?+?ElementUI表格內實現圖片點擊放大效果的兩種實現方式

更新時間：2024年08月12日 14:40:31 作者：思凡念真

這篇文章主要介紹了Vue?+?ElementUI表格內實現圖片點擊放大效果的兩種實現方式,第一種使用el-popover彈出框來實現而第二種使用v-viewer插件實現,需要的朋友可以參考下

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

trigger屬性用于設置何時觸發(fā)Popover(彈出框)屬性值有：hover、click、focus 和 manual

style="cursor:pointer"：當鼠標放上去時讓img標簽出現小手狀態(tài)

<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" rel="external nofollow"  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'
],

說明：

名稱	默認值	說明
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