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

更新時間：2020年08月05日 15:45:06 作者：護花使者

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

首先先安裝依賴：

npm install v-viewer --save

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

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

使用的一個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其實就是一個路徑。

在回到iview表格中，

需要以

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

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

所以改寫成這種格式的，在本人項目中的一個demo如下，就可以實現(xià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);
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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