Vue3图片浏览组件v-viewer

在Vue 3中使用v-viewer（一个基于Viewer.js的图片浏览插件），首先需要安装Viewer.js和v-viewer。

1. 安装Viewer.js和v-viewer：

npm install viewerjs
npm install v-viewer

2. 在Vue项目中全局引入v-viewer：

// main.js 或者其他的入口文件
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
 
const viewerOptions = {
  inline: true,
  button: true,
  navbar: true,
  title: true,
  tooltip: true,
  tooltipArrow: true,
  movable: true,
  zoomable: true,
  rotatable: true,
  scalable: true,
  transition: true,
  fullscreen: true,
  keyboard: true,
  url: 'data-source'
}
 
Vue.use(Viewer, viewerOptions)

3. 在组件中使用v-viewer指令：

<template>
  <div v-viewer>
    <img src="path/to/your/image.jpg" alt="图片描述">
  </div>
</template>

确保v-viewer指令应用在包含图片元素的父元素上。这样当你点击图片时，就会出现图片浏览器。