<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