vue3+vite使用viewerjs实现图片预览

1、安装依赖：cnpm i viewerjs -S

2、新建一个.vue文件，在template添加如下代码：

3、在vue文件的script中添加实现功能的代码：

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

const pictureDetailContainer = ref(null)

// 展示预览图片
const showPreviewPicture = () => {
  const photoViewer = new Viewer(pictureDetailContainer.value, {
    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: 0,
    // 每次关闭查看时触发
    hide() {
      photoViewer.destroy()
    },
    // 每次关闭查看时触发，在hide之后
    hidden() {
      photoViewer.destroy()
    },
    // 每次查看时触发
    show() {
      photoViewer.full()
    },
  })
  photoViewer.show()
}