首先，确保你的项目中已经安装了 Vant。如果没有安装，可以使用以下命令：
npm install vant
然后，在你的 Vue 组件中引入 Vant ImagePreview 组件：
<template>
<div>
<!-- 绑定点击事件触发图片预览 -->
<img v-for="(item, index) in images" :src="item" :key="index" @click="handleImagePreview(index)" />
<!-- 通过 ref 获取 ImagePreview 实例 -->
<van-image-preview :images="images" ref="imagePreview" />
</div>
</template>
<script>
import { ImagePreview } from 'vant';
export default {
components: {
[ImagePreview.name]: ImagePreview,
},
data() {
return {
images: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg',
],
};
},
methods: {
handleImagePreview(index) {
// 调用 ImagePreview 的实例方法打开图片预览
this.$refs.imagePreview.show(index);
},
},
};
</script>
在上面的例子中，我们引入了 Vant 的 ImagePreview 组件，并在模板中使用了 v-for 渲染图片列表。通过点击图片触发 handleImagePreview 方法，该方法通过 this.$refs.imagePreview.show(index) 调用 ImagePreview 的实例方法打开图片预览。
确保在项目中引入了 Vant 的样式文件，以确保样式正确显示。
这是一个基本的例子，你可以根据需要调整配置和样式。
转载请注明出处：http://www.zyzy.cn/article/detail/5682/Vant