快捷導(dǎo)航

Vue?+?ElementUI表格內(nèi)實(shí)現(xiàn)圖片點(diǎn)擊放大效果的兩種實(shí)現(xiàn)方式

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

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

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

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

style="cursor:pointer"：當(dāng)鼠標(biāo)放上去時(shí)讓img標(biāo)簽出現(xiàn)小手狀態(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插件

一、安裝依賴：在項(xiàng)目目錄文件中進(jìn)入安裝

npm install v-viewer --save

二、全局引入：在項(xiàng)目目錄下 ——> src文件夾下 ——> main.js進(jìn)行全局引入

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'
  }
})

三、使用：在想要的組件中進(jìn)行使用

單張圖片方式

<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一定要一個(gè)數(shù)組，否則報(bào)錯(cuò) -->
    <img
      v-for="(src,index) in signImages"
      :src="src"
      :key="index"
      width="50">
  </viewer>
</div>
<!-- signImages數(shù)組放在 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'
],

說(shuō)明：

名稱	默認(rèn)值	說(shuō)明
inline	false	啟用 inline 模式
button	true	顯示右上角關(guān)閉按鈕
navbar	true	顯示縮略圖導(dǎo)航
title	true	顯示當(dāng)前圖片的標(biāo)題
toolbar	true	顯示工具欄
tooltip	true	顯示縮放百分比
movable	true	圖片是否可移動(dòng)
zoomable	true	圖片是否可縮放
rotatable	true	圖片是否可旋轉(zhuǎn)
scalable	true	圖片是否可翻轉(zhuǎn)
transition	true	使用 CSS3 過(guò)度
fullscreen	true	播放時(shí)是否全屏
keyboard	true	是否支持鍵盤
url	src	設(shè)置大圖片的 url

參考資料：

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

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

到此這篇關(guān)于Vue + ElementUI表格內(nèi)實(shí)現(xiàn)圖片點(diǎn)擊放大效果的兩種方式的文章就介紹到這了,更多相關(guān)Vue ElementUI圖片點(diǎn)擊放大內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: