vue2/vue3实现图片预览

在现代前端开发中，图片预览是一个常见的需求，尤其是在电商网站、社交平台等场景下。用户点击图片时，希望能够展示一张大图并支持放大、缩小、滚动等交互功能。今天，我们将介绍如何在 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>

 参看文献：