Vant3 的 van-image-preview 组件用于实现图片预览功能。以下是一个简单的例子,演示如何在 Vue 组件中使用 Vant3 的 ImagePreview:
<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>

在上述代码中,我们使用了 img 标签显示了一组图片,并通过 @click 事件绑定了 handleImageClick 方法。在 handleImageClick 方法中,我们调用了 ImagePreview 方法来实现图片预览功能,传递了图片数组 images 和点击的图片索引 index。

确保你的项目已经正确引入了 Vant3,并按照文档配置,以确保组件能够正常工作。


转载请注明出处:http://www.zyzy.cn/article/detail/5750/Vant