快捷導(dǎo)航

Vue基于iview table展示圖片實(shí)現(xiàn)點(diǎn)擊放大

更新時(shí)間：2020年08月05日 15:45:06 作者：護(hù)花使者

這篇文章主要介紹了Vue基于iview table展示圖片實(shí)現(xiàn)點(diǎn)擊放大,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

首先先安裝依賴：

npm install v-viewer --save

然后全局引入，我這邊是在main.js里面操作寫的：

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

然后注冊(cè)下：

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

使用的一個(gè)demo就是：

<viewer :images="tupians">
   <i-col span="4" v-for="item in tupians">
     <div class="detailed">
      <img :src="item.img" alt="">
     </div>
   </i-col>
</viewer>

其中item.img其實(shí)就是一個(gè)路徑。

在回到iview表格中，

需要以

      h('xxxx', {
        props: {
          trigger: 'hover',
          placement: 'top',
          content: '二維碼'
        }
      }, [
      ])

這種格式渲染出來，第一個(gè)參數(shù)是標(biāo)簽，第二參數(shù)是標(biāo)簽里面可以含props(vue的v-bind)，也可以包含屬性。第三個(gè)參數(shù)是數(shù)組，表示子標(biāo)簽。子標(biāo)簽也是這種格式的，以此遞歸下去。

所以改寫成這種格式的，在本人項(xiàng)目中的一個(gè)demo如下，就可以實(shí)現(xiàn)在表格中點(diǎn)擊圖片進(jìn)行放大展示：

{
  title: '二維碼',
  align: 'center',
  render: (h, params) => {
    console.log('h, param', params);
    let devicesArr = [];
    let photo = [];
    photo.push('/erweima/'+params.row.pt_number+'.png');
    devicesArr.push(
      h('Tooltip', {
        props: {
          trigger: 'hover',
          placement: 'top',
          content: '二維碼'
        }
      }, [
        h('viewer', {
          props:{
            images:photo
          }
        }, [
          h('img', {
            attrs: {
              src:photo[0],
              style: 'width: 22px;margin-right:5px'
            },
          })
        ])
      ])
    );
    return h('div', devicesArr);
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue+element樹組件實(shí)現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件實(shí)現(xiàn)樹懶加載的過程，本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10
詳解vue中l(wèi)ocalStorage的使用方法
這篇文章主要介紹了詳解vue中l(wèi)ocalStorage的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
使用FileReader API創(chuàng)建Vue文件閱讀器組件
這篇文章主要介紹了使用FileReader API創(chuàng)建一個(gè)Vue的文件閱讀器組件,需要的朋友可以參考下
2018-04-04
Vue的computed計(jì)算屬性你了解嗎
這篇文章主要為大家詳細(xì)介紹了Vue的computed計(jì)算屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
Vue狀態(tài)管理之使用Pinia代替Vuex
這篇文章主要介紹了Vue狀態(tài)管理。下面文章主要圍繞著使用Pinia代替Vuex的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助
2021-11-11
vue用FileSaverJs導(dǎo)出文件
FileSaver.js?是在客戶端保存文件的解決方案，非常適合?在客戶端上生成文件的?Web?應(yīng)用，它是?HTML5?版本的?saveAs()?FileSaver?實(shí)現(xiàn)，這篇文章主要介紹了vue用FileSaverJs導(dǎo)出文件,需要的朋友可以參考下
2023-09-09
Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案
這篇文章主要介紹了Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03
vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法
這篇文章主要介紹了vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
mpvue構(gòu)建小程序的方法(步驟+地址)
mpvue是一個(gè)使用Vue.js開發(fā)小程序的前端框架。框架基于 Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
vue3?中的toRef函數(shù)和toRefs函數(shù)的基本使用
這篇文章主要介紹了vue3?toRef函數(shù)和toRefs函數(shù),文中介紹了ref和toRef的區(qū)別，ref本質(zhì)是拷貝，修改響應(yīng)式數(shù)據(jù)不會(huì)影響原始數(shù)據(jù)，toRef的本質(zhì)是引用關(guān)系，修改響應(yīng)式數(shù)據(jù)會(huì)影響原始數(shù)據(jù)，需要的朋友可以參考下
2022-11-11