使用場(chǎng)景：移動(dòng)端需要實(shí)現(xiàn)附件預(yù)覽功能，圖片文件可以手指縮放。由于附件比較多，打開頁面比較卡，為了提高用戶體驗(yàn)，所以預(yù)先加載圖片信息，當(dāng)用戶點(diǎn)擊想要查看的附件才打開對(duì)應(yīng)的圖片

先貼出實(shí)現(xiàn)過程

安裝

npm install vue-photo-preview --save

引入main.js

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {
  fullscreenEl: false,
  closeEl: false, // 控制是否顯示右上角關(guān)閉按鈕
  tapToClose: true, // 點(diǎn)擊滑動(dòng)區(qū)域應(yīng)關(guān)閉圖庫(kù)
  shareEl: false, // 控制是否顯示分享按鈕
  zoomEl: false, // 控制是否顯示放大縮小按鈕
  counterEl: false, // 控制是否顯示左上角圖片數(shù)量按鈕
  arrowEl: true, // 控制如圖的左右箭頭（pc瀏覽器模擬手機(jī)時(shí)）
  tapToToggleControls: true, // 點(diǎn)擊應(yīng)切換控件的可見性
  clickToCloseNonZoomable: true // 點(diǎn)擊圖片應(yīng)關(guān)閉圖庫(kù)，僅當(dāng)圖像小于視口的大小時(shí)
}
Vue.use(preview, options)

option里的選項(xiàng)根據(jù)自己需要來配置

頁面上使用方法

1、靜態(tài)引用方式-常用方式

<img src="xxx" preview="1" preview-text="描述文字" title="點(diǎn)擊查看大圖"> 

2、當(dāng)頁面上圖片文件較多的情況，我們采用這種方式來展示會(huì)使頁面加載變慢，尤其是通過數(shù)據(jù)交換平臺(tái)處理之后，頁面必須展示base64，交互效果可想而知，因此我們?cè)陧撁嫔?br> 一次只顯示一張圖片，點(diǎn)擊哪個(gè)就顯示那哪一張

async viewImg (item, index) {
  // 預(yù)覽圖片首先清除之前插入的dom
  // eslint-disable-next-line
  $('#hide-img').remove()
  let data = await this.getSrc(item)
  if (data.flag === 'SUCCESS') {
    // eslint-disable-next-line
    $('body').append(`<img id="hide-img" preview="${index}" src="${data.data}">`)
    // 動(dòng)態(tài)插入之后調(diào)用插件方法刷新預(yù)覽圖盒子
    this.$previewRefresh()
    let galleryElement = document.querySelector('#hide-img')
    galleryElement.onclick = this.onThumbnailsClick
    galleryElement.click()
  }
}

假如我們需要預(yù)覽列表，那么據(jù)需要我們將preview設(shè)置相同的屬性，這樣圖片就是一個(gè)分組
我們將上邊代碼進(jìn)行完善

async viewImg (item, index) { // 查看附件
      // 預(yù)覽圖片首先清除之前插入的dom
      // eslint-disable-next-line
      $('.hide-img').remove()
      let files = this.translateData.fileList
      files.forEach(async (item, index) => {
        if (item.fileName.toLowerCase().includes('png') || item.fileName.toLowerCase().includes('jpg') || item.fileName.toLowerCase().includes('jpeg') || item.fileName.toLowerCase().includes('pdf')) {
          let data = await this.getSrc(item)
          if (data.flag === 'SUCCESS') {
            // 一組的圖片preview屬性值需要相同
            // eslint-disable-next-line
            $('body').append(`<img class="hide-img" preview="0" src="${data.data}">`)
            // 動(dòng)態(tài)插入之后調(diào)用插件方法刷新預(yù)覽圖盒子
            this.$previewRefresh()
            if (index === 0) {
              let galleryElement = document.querySelector('.hide-img')
              galleryElement.onclick = this.onThumbnailsClick
              galleryElement.click()
            }
          } else {
            this.$toast(data.msg)
          }
        }
      })
    },