留自用,以免遗忘。有错误请指出,谢谢!
先附上:
https://github.com/mirari/v-viewer#readme
实现效果图如下:(用户点击即可下载该页所展示的图片)
<div @click="open()">预览图片</div>
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");
}