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>