viewer图片预览插件

参考github文档https://github.com/fengyuanchen/viewerjs#options
1、下载插件
2、引入插件
3、参数1：图片外div的dom对象
参数2：预览插件配置项
new Viewer(document.querySelector('.checkImgBox'), this.viewerOption)

4、使用的话：点击图片（图片click就会调用）

 <div class="checkImgBox">
              <img  :src="url"  class="imgBackgrounds" @click="showImg">
  </div>

    // 预览
    showImg() {
      new Viewer(document.querySelector('.checkImgBox'), this.viewerOption)
      // viewer.show()
    },
    coverClick() {
      console.log(555)
      // 必须触发对图片的点击才可以
      document.querySelector('.imgBackgrounds').click()
    }

      // 预览插件配置项
      viewerOption: {
        transition: false,
        zIndex: 9999,
        // 查看原图（原本是resize类型的图片）
        url: function(img) {
          var fileUrl = img.src
          return fileUrl.substring(0, fileUrl.lastIndexOf('_resize')) + fileUrl.substring(fileUrl.lastIndexOf('.'))
        },
        toolbar: {
          zoomIn: 1,
          zoomOut: 1,
          oneToOne: 1,
          reset: 1,
          prev: 1,
          play: 0,
          next: 1,
          rotateLeft: 1,
          rotateRight: 1,
          flipHorizontal: 1,
          flipVertical: 1
        }
        // view: function(item) {
        //   item.detail.image.style.visibility = 'hidden'
        // },
        // viewed: function(item) {
        //   item.detail.image.style.visibility = 'visible'
        // }
      },

遇到的坑

`获取的盒子box以及对应的Img,注意是对应的唯一的（表格中许多行中某一个图片，需要找出对应的）

    // 预览图片
    showImg(row) {
      // 获取对应的img盒子
      // 获取id对应的Index
      const index = this.loadList.findIndex(item => {
        return item.id === row.id
      })
      const mainTr = $('.ant-table-body .ant-table-tbody .ant-table-row').eq(index)
      const mainCheckBox = mainTr.children('td').children('.checkImgBox')[0]
      new Viewer(mainCheckBox, this.viewerOption)
    },

// 表格中是循环的，获取div标签并不是确定的唯一的
 <div slot="skuImg" slot-scope="text,record" class="checkImgBox" @click="coverClick(record)">
     <img :src="record.skuImg" width="100px" class="imgBackgrounds" @click="showImg(record)">
  </div>