首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的 Vue 组件中，可以像这样使用 ImagePreview 组件：
<template>
<div>
<!-- 使用 vant-image-preview 组件 -->
<van-image
v-for="(item, index) in images"
:src="item"
:key="index"
@click="handlePreview(index)"
/>
</div>
</template>
<script>
import { ImagePreview } from 'vant';
export default {
components: {
[ImagePreview.name]: ImagePreview,
},
setup() {
// 图片列表
const images = [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg',
];
// 点击图片时触发预览
const handlePreview = (index) => {
ImagePreview({
images,
startPosition: index,
});
};
return {
images,
handlePreview,
};
},
};
</script>
在这个例子中，我们使用了 van-image 组件展示图片列表，并通过 @click 事件触发了 handlePreview 方法。在 handlePreview 方法中，调用了 ImagePreview 函数来实现图片预览。其中，images 是图片列表数组，startPosition 是预览的起始位置，即点击的图片的索引。
ImagePreview 还支持其他的配置选项，例如 loop 用于设置是否开启循环预览，closeable 用于设置是否显示关闭按钮，show-index 用于设置是否显示图片索引等。你可以根据需要查看 Vant4 的官方文档获取更多信息：[Vant4 ImagePreview](https://vant-contrib.gitee.io/vant/next/#/zh-CN/image-preview)。
转载请注明出处：http://www.zyzy.cn/article/detail/5834/Vant