1.首先先在项目中下载viewerjs插件

npm install viewerjs

2.在页面中引入

import Viewer from 'v-viewer'；
import 'viewerjs/dist/viewer.css'；

3.在vue3中的使用 例：

效果图：

<template>
  <div ref="image">
    <img
      :src="item"
      alt=""
      class="image"
      @click="getOnclick"
      :data-original="`${item}`"
      v-for="item in imageList"
    />
  </div>
</template>

<script setup>
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import { reactive, ref, onMounted, nextTick } from "vue";
let imageList = reactive([
  "https://cdn.uviewui.com/uview/swiper/1.jpg",
  "https://cdn.uviewui.com/uview/swiper/swiper1.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png",
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
]);
const image = ref(null);
const getOnclick = () => {
  const viewer = new Viewer(image.value, {
    url: "data-original",
    show: function () {
      viewer.update();
    },
  // 相关配置项,详情见下面
  });
};
</script>

<style scoped>
.image {
  width: 400px;
  height: 200px;
  cursor: pointer;
  display: block;
  margin-top: 20px;
}
</style>

参数解释如下：

• image.value：这是一个在Vue 3中使用的ref对象，表示组件模板中的<div ref="image">元素。ref对象的.value属性包含了实际的DOM元素。
• { url: "data-original", show: function() { viewer.update(); } }：这是配置对象，用于设置Viewer的行为。其中，url: "data-original"指定了要显示的图片URL的属性名为"data-original"，即在<img>标签中使用:data-original绑定的值。
• show: function() { viewer.update(); }：这是show事件的回调函数，当viewer显示时会调用该函数，这里的逻辑是通过调用viewer.update()方法来更新Viewer的状态。

配置参数

如果要更改全局默认选项，可以使用view . setdefaults(选项)

toolbar Object详解

key值列表: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical"

{key:number|Boolean} 显示或者隐藏对应key的按钮 为Number的时候为可见性
{key: String } 自定义按钮的大小
{ key: Function } 自定义按钮点击的处理
{ key: { show: Boolean | Number, size: String, click: Function } 自定义按钮的每个属性

size的取值范围: small medium default large