vant3 ImagePreview的用法

Vant3 ImagePreview是一个基于Vue3的图片预览组件，它可以用于在网页上预览图片，支持手势缩放、滑动切换等功能。

使用方法如下：

安装Vant3：

npm install vant@next -S

在Vue项目中引入Vant3：

import { createApp } from 'vue';
import App from './App.vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(Vant);
app.mount('#app');

在需要使用的组件中引入ImagePreview：

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

export default {
  setup() {
    const images = ref([
      'https://img.yzcdn.cn/vant/apple-1.jpg',
      'https://img.yzcdn.cn/vant/apple-2.jpg',
      'https://img.yzcdn.cn/vant/apple-3.jpg',
    ]);

    const showPreview = (index) => {
      ImagePreview({
        images: images.value,
        startPosition: index,
      });
    };

    return {
      images,
      showPreview,
    };
  },
};

在模板中使用ImagePreview：

<template>
  <div>
    <img v-for="(item, index) in images" :key="index" :src="item" @click="showPreview(index)" />
  </div>
</template>

在点击图片时，调用showPreview方法，传入当前图片的索引，即可打开图片预览