viewer调用api使用图片查看器并实现图片的下载

留自用，以免遗忘。有错误请指出，谢谢！

先附上：

https://github.com/mirari/v-viewer#readme

实现效果图如下：（用户点击即可下载该页所展示的图片）

预览图片


import {showViewImgDialog} from '@/js/tool/imageLook.js'


imgUrlList: [
   "common/WechatIMG4.pic" ,
   "common/WechatIMG7.pic" ,
   "common/WechatIMG8.pic" ,
         
],
open() {
  showViewImgDialog(this.imgUrlList)
},

imageLook.js

import { api as viewerApi } from "v-viewer"
export function showViewImgDialog(imgSrc) {
  if (["", null, undefined].includes(imgSrc)) {
    this.$common.notify("error", "请先选择要查看的图片")  // 这里改成自己的消息弹框提示组件
    return false
  }
  viewerApi({
    options: {
      initialViewIndex: 0,
      toolbar: {
        zoomIn: true,
        zoomOut: true,
        oneToOne: true,
        reset: true,
        prev: true,
        play: true,
        next: true,
        rotateLeft: true,
        rotateRight: true,
        flipHorizontal: true,
        flipVertical: true,
        download: {
          click: function (ele) {
            var currentImage = document.querySelector(".viewer-active > img").src;
            // console.log('aaaaa',imgSrc,currentImage)
            window.location.href = currentImage;
          }
        },
      }
      
    },
    images: imgSrc
  })
}

下载按钮的样式 在viewer.css里添加以下代码：

.viewer-download::before {
  content: "download";
  color: transparent;
  display: block;
  font-size: 0;
  height: 20px;
  line-height: 0;
  width: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAXBJREFUOE/VlDFLlmEUhq9ra3HoT0RDCOIQEQnVkJRQU4QQJEKBICKmNFWEODRHUxJEaDT1ExxUJFLQpSEcxJ+gIE13PPa9H6+f72cSLr7j85xz3ec+57yPnPHnGfM4x8Ak88AD4ADYVO+dpj2NlpP8AH4CM0APMAX0A88rqLrUJHAMmGQWuK7erCckmQOutc76gA9qW6At1KmS5COwrr47yWKStIRX63FHKkxSlN8CL9T1fwAnChCYVbeOVZjkPvAZWFCfddi9AYyrDzvOR4t1YFktMX/3MMkVYBF40lRZkkZgBU/yFdhRpyvgBvBG/dZkswV8rD7tcj8EjKl3K+AucEv91SVhABhRR7rcvwQuqpMVcBIYVO909OgL8B0oQo+AfeBSfaWS9JbFB4bVxfaUk6wAe8Ca+rrWn/fAVWD7sOm1wST5BNwGXqllOEcfhySlist1YGtoJfFCw5THgHn1d9fFPs3/elLMOX6+/tf6HzsPjRVd/9/RAAAAAElFTkSuQmCC");
}