vant/packages/image-preview/zh-CN.md

ImagePreview 图片预览

使用指南

ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。

import { ImagePreview } from 'vant';

代码演示

基础用法

直接传入图片数组，即可展示图片预览

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
  }
});

手动关闭

通过实例上的 close 方法可以手动关闭图片预览

const instance = ImagePreview([
  'https://img.yzcdn.cn/1.jpg',
  'https://img.yzcdn.cn/2.jpg'
]);

setTimeout(() => {
  instance.close();
}, 1000);

配置项

参数名	说明	类型	默认值
images	需要预览的图片 URL 数组	Array	[]
startPosition	图片预览起始位置索引	Number	0
showIndex	是否显示页码	Boolean	true
onClose	关闭时的回调函数	Function	-

更新日志

版本	类型	内容
1.3.4	feature	新增 showIndex 属性
1.1.16	feature	支持传入 onClose 回调函数
1.1.13	bugfix	修复 startPosition 属性不生效的问题
1.1.3	improvement	优化点击检测
1.1.3	bugfix	修复只有一张图片时无法关闭的问题
1.1.1	bugfix	修复 offset 计算错误
1.0.5	bugfix	修复 close 方法失效的问题