移动端使用vue-preview-photo动态加载图片实现图片

使用场景：移动端需要实现附件预览功能，图片文件可以手指缩放。由于附件比较多，打开页面比较卡，为了提高用户体验，所以预先加载图片信息，当用户点击想要查看的附件才打开对应的图片

先贴出实现过程

安装

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, // 控制是否显示右上角关闭按钮
  tapToClose: true, // 点击滑动区域应关闭图库
  shareEl: false, // 控制是否显示分享按钮
  zoomEl: false, // 控制是否显示放大缩小按钮
  counterEl: false, // 控制是否显示左上角图片数量按钮
  arrowEl: true, // 控制如图的左右箭头（pc浏览器模拟手机时）
  tapToToggleControls: true, // 点击应切换控件的可见性
  clickToCloseNonZoomable: true // 点击图片应关闭图库，仅当图像小于视口的大小时
}
Vue.use(preview, options)

option里的选项根据自己需要来配置

页面上使用方法

1、静态引用方式-常用方式

<img src="xxx" preview="1" preview-text="描述文字" title="点击查看大图"> 

2、当页面上图片文件较多的情况，我们采用这种方式来展示会使页面加载变慢，尤其是通过数据交换平台处理之后，页面必须展示base64，交互效果可想而知，因此我们在页面上
一次只显示一张图片，点击哪个就显示那哪一张

async viewImg (item, index) {
  // 预览图片首先清除之前插入的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}">`)
    // 动态插入之后调用插件方法刷新预览图盒子
    this.$previewRefresh()
    let galleryElement = document.querySelector('#hide-img')
    galleryElement.onclick = this.onThumbnailsClick
    galleryElement.click()
  }
}

假如我们需要预览列表，那么据需要我们将preview设置相同的属性，这样图片就是一个分组
我们将上边代码进行完善

async viewImg (item, index) { // 查看附件
      // 预览图片首先清除之前插入的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}">`)
            // 动态插入之后调用插件方法刷新预览图盒子
            this.$previewRefresh()
            if (index === 0) {
              let galleryElement = document.querySelector('.hide-img')
              galleryElement.onclick = this.onThumbnailsClick
              galleryElement.click()
            }
          } else {
            this.$toast(data.msg)
          }
        }
      })
    },