Vant ImagePreview 图片预览
引入
ImagePreview和其他组件不同,不是通过HTML结构的方式来使用,而是通过函数调用的方式。使用前需要先引入它。
import Vue from 'vue';
import { ImagePreview } from 'vant';
Vue.use(ImagePreview);
代码演示
基础用法
直接传入图片数组,即可展示图片预览
ImagePreview([
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]);
传入配置项
通过传入配置对象,可以指定初始图片的位置、监听关闭事件
ImagePreview({
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
],
startPosition: 1,
onClose() {
// do something
}
});
异步关闭
通过asyncClose属性可以开启异步关闭,开启后异步关闭后,只能通过实例上的 close 方法关闭图片预览
const instance = ImagePreview({
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
],
asyncClose: true
});
setTimeout(() => {
instance.close();
}, 1000);
组件调用
如果需要在图片预览内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 Vue.use 注册组件
<van-image-preview v-model="show" :images="images" @change="onChange">
<template v-slot:index>第{{ index }}页</template>
</van-image-preview>
export default {
data() {
return {
show: false,
index: 0,
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
};
},
methods: {
onChange(index) {
this.index = index;
}
}
}
API
Options
通过函数调用 ImagePreview 时,支持传入以下选项:
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
images | 需要预览的图片 URL 数组 | string[] | [] |
startPosition | 图片预览起始位置索引 | number | string | 0 |
swipeDuration | 动画时长,单位为ms | number | string | 500 |
showIndex | 是否显示页码 | boolean | true |
showIndicators | 是否显示轮播指示器 | boolean | false |
loop | 是否开启循环播放 | boolean | true |
onClose | 关闭时的回调函数 | Function | - |
onChange v2.0.3 | 切换图片时的回调函数,回调参数为当前索引 | Function | - |
asyncClose | 是否开启异步关闭 | boolean | false |
closeOnPopstate | 是否在页面回退时自动关闭 | boolean | false |
className | 自定义类名 | any | - |
lazyLoad | 是否开启图片懒加载,须配合 Lazyload 组件使用 | boolean | false |
maxZoom | 手势缩放时,最大缩放比例 | number | string | 3 |
minZoom | 手势缩放时,最小缩放比例 | number | string | 1/3 |
Props
通过组件调用 ImagePreview 时,支持以下 Props:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
images | 需要预览的图片 URL 数组 | string[] | [] |
start-position | 图片预览起始位置索引 | number | string | 0 |
swipe-duration | 动画时长,单位为 ms | number | string | 500 |
show-index | 是否显示页码 | boolean | true |
show-indicators | 是否显示轮播指示器 | boolean | false |
loop | 是否开启循环播放 | boolean | true |
async-close | 是否开启异步关闭 | boolean | false |
close-on-popstate | 是否在页面回退时自动关闭 | boolean | false |
class-name | 自定义类名 | any | - |
lazy-load | 是否开启图片懒加载,须配合 Lazyload 组件使用 | boolean | false |
max-zoom | 手势缩放时,最大缩放比例 | number | string | 3 |
min-zoom | 手势缩放时,最小缩放比例 | number | string | 1/3 |
Events
通过组件调用 ImagePreview 时,支持以下事件:
事件 | 说明 | 回调参数 |
---|---|---|
close | 关闭时触发 | { index: 索引, url: 图片链接 } |
change | 切换当前图片时触发 | index, 当前图片的索引 |
Slots
通过组件调用 ImagePreview 时,支持以下插槽:
名称 | 说明 |
---|---|
index | 自定义页码内容 |
cover | 自定义覆盖在图片预览上方的内容 |
onClose 回调参数
参数名 | 说明 | 类型 |
---|---|---|
url | 当前图片 URL | string |
index | 当前图片的索引值 | number |
常见问题
在桌面端无法操作组件?
参见在桌面端使用。