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
onClose	关闭时的回调函数	Function

更新日志

版本	类型	内容
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 方法失效的问题
0.11.1	feature	支持手动关闭
0.10.7	feature	支持自定义初始位置
0.10.0	bugfix	修复图片加载过程中跳动的问题
0.9.6	bugfix	修复滑动后无法展示图片的问题