<template>
  <div>
    <!-- 点击图片时触发预览 -->
    <img
      v-for="(image, index) in images"
      :key="index"
      :src="image"
      @click="handleImageClick(index)"
      style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; cursor: pointer;"
    />
  </div>
</template>

<script>
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 handleImageClick = (index) => {
      // 调用 ImagePreview 方法进行图片预览
      ImagePreview({
        images: images.value, // 图片数组
        startPosition: index, // 初始显示的图片索引
      });
    };

    return {
      images,
      handleImageClick,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>