js 预览图片（带遮罩层 带下载按钮）

//PicturePreview.js

import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';


class PicturePreview {
  
      // 调用openPicture 方法就行  传入预览路径 和下载路径  如果不传染下载路径 则下载按钮不显示
      openPicture(url,down_url){
        this._creatDom(url,down_url)
      }

      _creatDom(url,down_url){
        let app = document.querySelector('#app')
            let img_dom = document.createElement('div')
            img_dom.style.display = "none";
            img_dom.style.width = '0px';
            img_dom.style.height = '0px';
            app.appendChild(img_dom);
            let str = `<img src="${url}" alt="" style="width:100%;height:400px"/>`
            img_dom.innerHTML += str
            this._showPictiue(img_dom)
            down_url? this._addDownButton(url,down_url) : null 
      }
      _addDownButton(url,down_url){
        // this.$nextTick(() => {
            let wrapper = document.getElementsByClassName(
                'viewer-toolbar'
            )
            let str = `<li class= "down-img" style="line-height:40px"><svg t="1658391442219" class="icon" viewBox="0 0 1024 1024" version="1.1"  p-id="3396" width="16" height="16"><path d="M128 806.4l768 0 0 89.6-768 0 0-89.6ZM732.288 528l-176.4992 186.1376c-10.9504 11.2064-26.4128 18.4896-43.7888 18.4896s-32.832-7.2832-43.6032-18.6048L291.5264 528.1344c-9.2288-10.0224-15.1104-22.9696-15.1104-37.3248 0-30.816 26.3808-55.8016 58.8992-55.8016 0.4544 0 0.896 0.0576 1.344 0.0704l0-0.352 116.4352 0L453.0944 297.9392c0-30.8352 26.3872-55.8208 58.8992-55.8208 32.5312 0 58.9056 24.9792 58.9056 55.8208l0 136.7872 114.2848 0 0 0.448c1.1648-0.064 2.3104-0.1792 3.5008-0.1792 32.5248 0 58.8992 24.992 58.8992 55.8144C747.5904 505.1648 741.7024 518.1056 732.288 528zM416 128l192 0 0 324.8-192 0 0-324.8Z" p-id="3397" fill="#ffffff"></path></svg> </li>`
            wrapper[0].childNodes[0].innerHTML += str
            wrapper[0].childNodes[0].addEventListener('click', (e)=> {
                // console.log(e);
                if(e.target.nodeName !=='LI') {
                    // 下载按钮
                    let  elemIF = document.createElement("iframe");
                    elemIF.src = down_url;
                    elemIF.style.display = "none";
                    document.body.appendChild(elemIF);
                    // elemIF.remove()
                }
            })
            
           
      }

      _showPictiue(img_dom){
        const photoViewer = new Viewer(img_dom, {
            inline: false, // 是否启用 inline 模式
            fullscreen: true, // 播放时是否全屏
            title: false, // 是否显示当前图片的标题
            navbar: false, //是否显示缩略图导航
            zIndex: 9999,
            toolbar: {  // 显示工具栏
             // 下面各种按钮1显示，0隐藏，可自定义按钮大小和点击事件
              zoomIn: 1, // 放大图片
              zoomOut: 1, //缩小图片
              oneToOne: 1, // 图片比例100%
              reset: 1, // 重置图片大小
              prev: 0, // 查看上一张图片
              play: 0, // 播放图片
              next: 0,// 查看下一张图片
              rotateLeft: 1,// 向左旋转图片
              rotateRight: 1,// 向右旋转图片
              flipHorizontal: 1,// 图片左右翻转
              flipVertical: 1, // 图片上下翻转
            },
            // 定义用于查看的图像的初始索引
            initialViewIndex: 0, 
            // 每次关闭查看时触发 
            hide () {
              photoViewer.destroy();
              img_dom.remove()
            },
            // 每次关闭查看时触发，在hide之后 
            hidden () {
              photoViewer.destroy();
            },
            // 每次查看时触发
            show () {
              photoViewer.full();
              
            },
          });
          photoViewer.show();
      }
}
export default PicturePreview

使用 ： 

1. 全局使用 ： vue 里 main.js可以全局注册： 

// 预览图片api

import PicturePreview from './assets/js/PicturePreview.js'  

Vue.prototype.$pictureView = new PicturePreview()

然后再组件vue里 使用 this.$pictureView.openPicture(url,down_url)  

2.  JS 单独使用 

直接important 引入js   然后 var jsFuc = new PicturePreview()  ;  

jsFuc.openPicture() 方法就行了

效果：