在现代前端开发中，图片预览是一个常见的需求，尤其是在电商网站、社交平台等场景下。用户点击图片时，希望能够展示一张大图并支持放大、缩小、滚动等交互功能。今天，我们将介绍如何在 Vue 中实现一个简洁高效的图片预览功能，核心使用 v-viewer 和底层的 Viewer.js。

1. 什么是 v-viewer？

v-viewer 是一个基于 Viewer.js 的 Vue 图片查看器插件，提供了便捷的 API 和 Vue 组件封装，能够快速实现图片预览功能。Viewer.js 是一个轻量级、易于集成的图片查看器，支持图片放大、缩小、旋转等功能。

2. 安装 v-viewer

首先，我们需要安装 v-viewer。使用 npm 可以方便地安装这个包：

npm install v-viewer@next viewerjs

3. 在 Vue 项目中使用 v-viewer

3.1. 引入 v-viewer

在你的 Vue 项目中，引入 v-viewer 并进行全局注册：

import { createApp } from 'vue'
import App from './App.vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
const app = createApp(App)
app.use(VueViewer)
app.mount('#app')

3.2. 在组件中使用

在你的组件中，可以直接使用 v-viewer 提供的指令来实现图片预览功能。通过 v-viewer 指令，你可以标记需要预览的图片元素。

<template><div><!-- 指令方式调用--><div class="images" v-viewer><img v-for="src in images" :key="src" :src="src"></div><!-- 组件方式调用--><viewer :images="images"><img v-for="src in images" :key="src" :src="src"></viewer><!-- api方式调用 --><button type="button" @click="show">Click to show</button></div>
</template>
<script lang="ts">import { defineComponent } from 'vue'export default defineComponent({data() {return {images: ["https://picsum.photos/200/200","https://picsum.photos/300/200","https://picsum.photos/250/200"]};},methods: {show() {this.$viewerApi({images: this.images,})},},})
</script>

 参看文献：https://mirari.cc/posts/vue3-viewer#viewer%25E7%259A%2584%25E9%2585%258D%25E7%25BD%25AE%25E9%25A1%25B9-%25E6%2596%25B9%25E6%25B3%2595