插件概述

  1. v-viewer
  2. vue-image-preview
  3. vue-preview

这些插件各有特点，以下将分别进行详细介绍。

v-viewer插件详解

1. 安装与配置

npm install v-viewer
# 或
yarn add v-viewer

在Vue3项目中，引入并使用v-viewer插件的方法如下：

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

app.use(Viewer)

2. 使用方法

v-viewer插件支持指令形式调用，只需在元素上添加v-viewer指令即可。以下是一个简单的示例：

<div v-viewer>
  <img src="path/to/image1.jpg">
  <img src="path/to/image2.jpg">
</div>

3. 特点

  • 支持移动设备触摸事件
  • 支持响应式
  • 支持放大/缩小
  • 支持旋转（类似微博的图片旋转）
  • 支持水平/垂直翻转
  • 支持图片移动
  • 支持键盘
  • 支持全屏幻灯片模式（可做屏保）
  • 支持缩略图
  • 支持标题显示
  • 支持多种自定义事件

vue-image-preview插件详解

1. 安装与配置

npm install vue-image-preview
# 或
yarn add vue-image-preview

在Vue3项目中，引入并使用vue-image-preview插件的方法如下：

import VueImagePreview from 'vue-image-preview'

app.use(VueImagePreview)

2. 使用方法

<template>
  <div>
    <img src="path/to/image.jpg" @click="openImagePreview">
  </div>
</template>

<script>
export default {
  methods: {
    openImagePreview() {
      this.$refs.imagePreview.open('path/to/image.jpg')
    }
  }
}
</script>

3. 特点

  • 简单易用
  • 支持图片预览
  • 支持图片放大/缩小
  • 支持图片旋转
  • 支持图片删除

vue-preview插件详解

1. 安装与配置

npm install vue-preview
# 或
yarn add vue-preview

在Vue3项目中，引入并使用vue-preview插件的方法如下：

import 'vue-preview/dist/vue-preview.css'
import Preview from 'vue-preview'

app.use(Preview)

2. 使用方法

<template>
  <div>
    <img src="path/to/image.jpg" @click="previewImage">
  </div>
</template>

<script>
export default {
  methods: {
    previewImage(event) {
      this.$preview.open(event.target.src)
    }
  }
}
</script>

3. 特点

  • 灵活易用
  • 支持图片预览
  • 支持图片放大/缩小
  • 支持图片旋转
  • 支持图片删除
  • 支持自定义样式

总结