ImagePreview 图片预览

使用指南

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

  1. import { ImagePreview } from 'vant';

代码演示

基础用法

  1. ImagePreview([
  2. 'https://img.yzcdn.cn/1.jpg',
  3. 'https://img.yzcdn.cn/2.jpg'
  4. ]);

指定初始位置

  1. ImagePreview([
  2. 'https://img.yzcdn.cn/1.jpg',
  3. 'https://img.yzcdn.cn/2.jpg'
  4. ], 1);

手动关闭

  1. const instance = ImagePreview([
  2. 'https://img.yzcdn.cn/1.jpg',
  3. 'https://img.yzcdn.cn/2.jpg'
  4. ]);
  5. setTimeout(() => {
  6. instance.close();
  7. }, 1000);

方法参数

参数名 说明 类型
imageUrls 需要预览的图片 Array
startPosition 图片预览起始位置索引 Number

原文:

https://youzan.github.io/vant/#/zh-CN/image-preview