viewer.js是一款非常强大的图片预览插件，之前我爱模板网介绍过js原生和jQuery版本的使用：Viewer.js原生版和jQuery版。今天再介绍下基于vue3的使用方法。
最终效果如下：
1、安装viewerjs插件：
npm install viewerjs
2、引入viewerjs插件和样式:
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
3、定义接收插件实例的对象
const viewer = ref(null)
4、准备图片dom：
<ul class="products flex flex-wrap" id="viewer">
<li v-for="(item, index) in detail.shopProductPictures" :key="index" @click="previewImg"><img :src="DEFAULT_CONFIG.IMG_PRE + item.url" /></li>
</ul>
5、点击图片预览：
function previewImg() {
viewer.value = new Viewer(document.getElementById('viewer'), {
inline: false, // 内联模式
button: true, // 是否显示关闭按钮
loading: true, // 图片加载状态
zIndex: 9999, // 设置层级
})
viewer.value.show()
}
6、离开页面时，销毁viewerjs插件：
onUnmounted(() => {
if (viewer.value) {
viewer.value.destroy() // 销毁 viewer 实例
}
})