vue3 的图片预览组件
- 基于 typescript
- 支持桌面端和移动端
- 支持左右切换导航、上/下滑关闭、双击放大/缩小、双指放大/缩小、键盘导航/关闭、点击切换控件、翻转、下载
- 图片尺寸自适应
- 图片切换、打开、关闭动画
Demo: https://namewjp.github.io/vue3-photo-preview/
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>
| 名称 |
类型 |
描述 |
默认值 |
必填 |
| photo-closable |
boolean |
图片点击是否关闭 |
false |
否 |
| mask-closable |
boolean |
背景点击是否关闭 |
true |
否 |
| should-transition |
boolean |
箭头切换是否需要过渡 |
false |
否 |
| default-backdrop-opacity |
number |
默认背景透明度 |
1 |
否 |
| loop |
boolean |
是否循环显示预览图 |
false |
否 |
| download-method |
(item: ItemType) => void|null |
下载图片方法，不传使用内置的下载方法 |
null |
否 |
| 名称 |
描述 |
参数 |
| indexChange |
图片切换回调 |
{ index, items, visible } |
| visibleChange |
图片显隐切换回调 |
{ index, items, visible } |
| 名称 |
类型 |
描述 |
默认值 |
必填 |
| src |
string |
图片地址 |
- |
是 |
| intro |
string |
图片介绍 |
- |
否 |
| download-name |
string |
图片下载名称 |
图片名称 |
否 |
| 名称 |
类型 |
描述 |
默认值 |
必填 |
| items |
ItemType[] |
图片列表 |
- |
是 |
| index |
number |
图片当前索引 |
- |
是 |
| visible |
number |
是否显示模态框 |
- |
是 |
| should-transition |
boolean |
箭头切换是否需要过渡 |
false |
否 |
| toggle-overlay |
boolean |
是否切换显隐覆盖物 |
true |
否 |
| default-backdrop-opacity |
number |
默认背景透明度 |
1 |
否 |
| loop |
boolean |
是否循环显示预览图 |
false |
否 |
| download-method |
(item: ItemType) => void|null |
下载图片方法，不传使用内置的下载方法 |
null |
否 |
| 名称 |
描述 |
参数 |
| clickPhoto |
点击预览图片的回调 |
MouseEvent|TouchEvent |
| clickMask |
点击预览背景的回调 |
MouseEvent|TouchEvent |
| changeIndex |
图片下标改变的回调 |
newIndex |
| closeModal |
关闭预览的回调 |
- |
- 在根目录依次执行
# 安装依赖
npm ci
# 实时编译代码
npm run dev
- 进入 example 目录依次执行
# 安装依赖
npm ci
# 实时编译代码
npm run dev
此时，修改 根目录 或者 example目录 的任何代码都会导致项目重新打包构建。
参考：https://github.com/MinJieLiu/react-photo-view