函數(shù)調(diào)用

ImagePreview 是一個函數(shù)，調(diào)用函數(shù)后會直接在頁面中展示圖片預覽界面。

import { ImagePreview } from 'vant';

ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']);

組件調(diào)用

通過組件調(diào)用 ImagePreview 時，可以通過下面的方式進行注冊。

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

// 全局注冊
Vue.use(ImagePreview);

// 局部注冊
export default {
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
};

基礎用法

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

ImagePreview([
  'https://img01.yzcdn.cn/vant/apple-1.jpg',
  'https://img01.yzcdn.cn/vant/apple-2.jpg',
]);

指定初始位置

ImagePreview 支持傳入配置對象，并通過 startPosition 選項指定圖片的初始位置（索引值）。

ImagePreview({
  images: [
    'https://img01.yzcdn.cn/vant/apple-1.jpg',
    'https://img01.yzcdn.cn/vant/apple-2.jpg',
  ],
  startPosition: 1,
});

展示關閉按鈕

設置 closeable 屬性后，會在彈出層的右上角顯示關閉圖標，并且可以通過 close-icon 屬性自定義圖標，使用close-icon-position 屬性可以自定義圖標位置。

ImagePreview({
  images: [
    'https://img01.yzcdn.cn/vant/apple-1.jpg',
    'https://img01.yzcdn.cn/vant/apple-2.jpg',
  ],
  closeable: true,
});

監(jiān)聽關閉事件

通過 onClose 選項監(jiān)聽圖片預覽的關閉事件。

import { Toast } from 'vant';

ImagePreview({
  images: [
    'https://img01.yzcdn.cn/vant/apple-1.jpg',
    'https://img01.yzcdn.cn/vant/apple-2.jpg',
  ],
  onClose() {
    Toast('關閉');
  },
});

異步關閉

通過 asyncClose 屬性可以開啟異步關閉，開啟后異步關閉后，只能通過實例上的 close 方法關閉圖片預覽。

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

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

組件調(diào)用

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

<van-image-preview v-model="show" :images="images" @change="onChange">
  <template v-slot:index>第{{ index }}頁</template>
</van-image-preview>

export default {
  data() {
    return {
      show: false,
      index: 0,
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
  methods: {
    onChange(index) {
      this.index = index;
    },
  },
};

Options

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

Props

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

Events

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

方法

通過組件調(diào)用 ImagePreview 時，通過 ref 可以獲取到 ImagePreview 實例并調(diào)用實例方法，詳見組件實例方法。

Slots

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

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

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

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。

在桌面端無法操作組件？

參見桌面端適配。