VUE3的学习和使用(四)用viewerjs插件实现图片预览
用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(); } };