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

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

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

<template>
  <div ref="pictureDetailContainer">
    <n-space justify="center" :wrap-item="false" class="w-full h-full">
      <n-space vertical :wrap-item="false" class="pt-1/26 h-full">
        <SearchSuggestion
          :title="titleVal"
          :identity="identityValue"
          has-refresh
          has-mark
        ></SearchSuggestion>
      </n-space>
      <n-space vertical :wrap-item="false" class="w-27/50 h-full">
        <n-space
          :wrap-item="false"
          class="w-full h-1/10"
          justify="center"
          align="center"
          >{{ resContent.title ?? '无标题' }}</n-space
        >
        <n-space :wrap-item="false" class="w-full h-1/2"
          ><img
            class="w-full h-full cursor-pointer"
            :src="imgUrl"
            @click="showPreviewPicture"
        /></n-space>
        <n-space :wrap-item="false" class="w-full h-3/10"
          ><DetailContent :detail-content="resContent"></DetailContent
        ></n-space>
      </n-space>
    </n-space>
  </div>
</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()
}