传送门: Vue图片浏览组件v-viewer
定义容器
<!-- 放大图片容器弹框 -->
<div id="view-container" style="display: none" class="view-container">
<img :src="item.imgsrc" v-for="item in imgList" :key="item.mid" />
</div>
开始挂载
//imgList为存储所有图片的数组
let index = this.imgList.findIndex(item => item.mid == mid); //当前第几张图片显示
var viewer = new Viewer(document.getElementById("view-container"), {
hidden: function() {
viewer.destroy();
},
inline: false,
button: true, //显示右上角关闭按钮
// navbar: this.electronTF?false:true,//显示缩略图导航
navbar: true, //显示缩略图导航
title: false, //显示当前图片的标题
toolbar: true, //功能全开
tooltip: true, //布尔值 true 显示缩放百分比
movable: true, // 布尔值 true 图片是否可移动
zoomable: true,
rotatable: true, // 布尔值 true 图片是否可旋转
scalable: true, // 布尔值 true 图片是否可翻转
transition: true,
fullscreen: false,
keyboard: true,
interval: 1000 * 3,//幻灯片模式切换时间
// build: function() {
// console.log("build");
// },
// built: function() {
// console.log("built");
// },
// show: function() {
// //开始显示
// console.log("show");
// },
// shown: function() {
// //开始显示完毕
// console.log("shown");
// },
// hide: function() {
// //结束显示
// console.log("hide");
// },
// hidden: function() {
// //结束显示完毕
// console.log("hidden");
// },
view: function(e) {
//开始显示-图片
console.log("view");
// 可以拿全局变量存储-在右键无效的情况下自定义下载图片
imgUrl = e.detail.image.currentSrc;//图片src
imgName = e.detail.image.alt;//图片名称
},
// viewed: function(e) {
// //开始显示完毕-图片
// console.log("viewed");
// }
});
viewer.view(index);//需要显示
viewer.show();//开始显示
提一点,控制dom显示与隐藏
shown: function() {
//开始显示完毕
document.getElementById("suspend-box").style.display = "block";
},
hide: function() {
//结束显示
document.getElementById("suspend-box").style.display = "none";
},
效果图
这是一个electron做的桌面程序
