Vue3可用的图片预览插件【vue3-photo-preview】

vue3 的图片预览组件

特点：

• 基于 typescript
• 支持桌面端和移动端
• 支持左右切换导航、上/下滑关闭、双击放大/缩小、双指放大/缩小、键盘导航/关闭、点击切换控件、翻转、下载
• 图片尺寸自适应
• 图片切换、打开、关闭动画

---

安装

npm install -S vue3-photo-preview

---

全局注册：

import vue3PhotoPreview from 'vue3-photo-preview';
import 'vue3-photo-preview/dist/index.css';

app.use(vue3PhotoPreview);

---

使用

<template>
  <photo-provider>
    <photo-consumer v-for="src in imgList" :intro="src" :key="src" :src="src">
      <img :src="src" class="view-box">
    </photo-consumer>
  </photo-provider>
</template>

API

效果