Vant ImagePreview 圖片預(yù)覽

引入

ImagePreview和其他組件不同，不是通過(guò)HTML結(jié)構(gòu)的方式來(lái)使用，而是通過(guò)函數(shù)調(diào)用的方式。使用前需要先引入它。

import Vue from 'vue';
import { ImagePreview } from 'vant';

Vue.use(ImagePreview);

代碼演示

基礎(chǔ)用法

直接傳入圖片數(shù)組，即可展示圖片預(yù)覽

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

傳入配置項(xiàng)

通過(guò)傳入配置對(duì)象，可以指定初始圖片的位置、監(jiān)聽(tīng)關(guān)閉事件

ImagePreview({
  images: [
    'https://img.yzcdn.cn/1.jpg',
    'https://img.yzcdn.cn/2.jpg'
  ],
  startPosition: 1,
  onClose() {
    // do something
  }
});

異步關(guān)閉

通過(guò)asyncClose屬性可以開(kāi)啟異步關(guān)閉，開(kāi)啟后異步關(guān)閉后，只能通過(guò)實(shí)例上的 close 方法關(guān)閉圖片預(yù)覽

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

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

組件調(diào)用

如果需要在圖片預(yù)覽內(nèi)嵌入組件或其他自定義內(nèi)容，可以使用組件調(diào)用的方式，調(diào)用前需要通過(guò) Vue.use 注冊(cè)組件

<van-image-preview v-model="show" :images="images" @change="onChange">
  <template v-slot:index>第{{ index }}頁(yè)</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

通過(guò)函數(shù)調(diào)用 ImagePreview 時(shí)，支持傳入以下選項(xiàng)：

Props

通過(guò)組件調(diào)用 ImagePreview 時(shí)，支持以下 Props：

Events

通過(guò)組件調(diào)用 ImagePreview 時(shí)，支持以下事件：

Slots

通過(guò)組件調(diào)用 ImagePreview 時(shí)，支持以下插槽：

onClose 回調(diào)參數(shù)

常見(jiàn)問(wèn)題

在桌面端無(wú)法操作組件？

參見(jiàn)在桌面端使用。