viewerjs使用

viewerjs是用来预览图片的一个插件，记录一下自己怎么使用的，以防忘记。

使用背景：vue3  + ts 

1.下载：

npm install viewerjs

2.引入

import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css'

3.使用，我是点击事件触发的，所以我把初始化写在了点击事件里

1.创建一个ref实例，用于保存viewer
    const viewer =ref(null)
2.
    const getImg = ($event: any) => {
        const imgEle: any = document.querySelector('.openImg')
        // 判断是不是图片类型
        if (imgEle && $event.target.tagName === 'IMG') {
        viewer.value = new Viewer(imgEle, {
            inline: false, //内联模式
            button: true,//是否显示关闭按钮
            loading: true,//图片加载状态
            zIndex: 9999, // 设置层级
        })
        viewer.value.show()//是否立即执行。
    }
}

4.销毁，由于我是写在dialog弹出层中，如果我在关闭的时候不进行销毁的话，那么第二次打开将无法加载。

// 监听dialog关闭
watch(visible, (val) => {
    if (!val) {
        if (viewer.value) {
            viewer.value.destroy(); // 销毁 viewer 实例
        }
    }
})

大概就是这些，其实这个有很多的配置项，不过官网对我来说不太友好，我就简化了。