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
效果