用viewerjs插件实现图片预览
// 安装依赖
"viewerjs": "^1.9.0"
在template里展示图片并设置点击事件
<template>
<ul id="img-area">
<li v-for="(item,index) in imgList" :key="item.id">
<button @click="previewImage(index)">
<img :src="xxx" alt=""/>
</button>
</li>
</ul>
</template>
预览函数
const previewImage = (index) => {
const box = document.querySelector('#img-area');
if (box) {
const photoViewer = new Viewer(box, {
inline: false, // 是否启用 inline 模式
fullscreen: true, // 播放时是否全屏
title: false, // 是否显示当前图片的标题
toolbar: { // 显示工具栏
// 下面各种按钮1显示，0隐藏，可自定义按钮大小和点击事件
zoomIn: 1, // 放大图片
zoomOut: 1, //缩小图片
oneToOne: 1, // 图片比例100%
reset: 1, // 重置图片大小
prev: 1, // 查看上一张图片
play: 0, // 播放图片
next: 1,// 查看下一张图片
rotateLeft: 1,// 向左旋转图片
rotateRight: 1,// 向右旋转图片
flipHorizontal: 1,// 图片左右翻转
flipVertical: 1, // 图片上下翻转
},
// 定义用于查看的图像的初始索引
initialViewIndex: index,
// 每次关闭查看时触发
hide () {
photoViewer.destroy();
},
// 每次关闭查看时触发，在hide之后
hidden () {
photoViewer.destroy();
},
// 每次查看时触发
show () {
photoViewer.full();
},
});
photoViewer.show();
}
};
