vant/docs/examples-docs/zh-CN/image-preview.md
neverland 6c37a6906f
[new feature] ImagePreview support startPosition (#286)
* [bugfix] CouponList always show empty info

* [bugfix] add click feedback of buttons in components

* [Doc] add custom theme document

* [new feature] Notice bar support more props

* [bugfix] PullRefresh test cases

* [bugfix] unused NoticeBar style

* [bugfix] Swipe width calc error

* [Doc] english document of all action components

* [Doc] change document site path to /zanui/vant

* [Doc] fix

* [bugfix] uploader style error

* [bugfix] tabs document demo

* [new feature] Cell support vue-router target route

* [bugfix] add cell test cases

* update yarn.lock

* [bugfix] Tabbar cann't display info when use icon slot

* [Doc] update document title

* [bugfix] Dialog should reset button text when showed

* [new feature] CouponList add showCloseButton prop

* [new feature] Swipe add 'initialSwipe' prop

* [bugfix] NoticeBar text disappeared when page back

* [new feature] ImagePreview support startPosition

* fix: improve imagePreview test cases
2017-11-07 02:22:17 -06:00

1.7 KiB
Raw Blame History

ImagePreview 图片预览

使用指南

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

import { ImagePreview } from 'vant';

代码演示

基础用法

:::demo 基础用法

<van-button @click="showImagePreview">预览图片</van-button>
export default {
  methods: {
    showImagePreview() {
      ImagePreview([
        'https://img.yzcdn.cn/1.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]);
    }
  }
};

:::

指定初始位置

:::demo 指定初始位置

<van-button @click="showImagePreview(1)">指定初始位置</van-button>
export default {
  methods: {
    showImagePreview(startPosition) {
      ImagePreview([
        'https://img.yzcdn.cn/1.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ], startPosition);
    }
  }
};

:::

方法参数

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