Vant 图片放大：单张图片点击放大实现代码

下面是一个使用Vant组件库实现点击图片放大的示例代码：

<template>
  <div>
    <van-image
      v-for='(item, index) in images'
      :key='index'
      :src='item.src'
      @click='showImage(index)'
    />
    <van-image-preview
      :images='previewImages'
      v-model:show='previewVisible'
      @close='previewVisible = false'
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'https://example.com/image1.jpg' },
        { src: 'https://example.com/image2.jpg' },
        { src: 'https://example.com/image3.jpg' },
      ],
      previewImages: [], // 预览图片列表
      previewVisible: false, // 是否显示预览图片
    };
  },
  methods: {
    showImage(index) {
      this.previewImages = this.images.map(item => item.src);
      this.previewVisible = true;
      this.$nextTick(() => {
        this.$refs.preview.setCurrentIndex(index);
      });
    },
  },
};
</script>

在上面的示例代码中，使用了van-image组件展示图片，并通过v-for指令循环渲染图片列表。当用户点击图片时，调用showImage方法展示预览图片。

在showImage方法中，首先通过map方法获取图片列表中的所有图片URL，并赋值给previewImages变量。然后将previewVisible设置为true，显示预览图片。在切换图片时，通过setCurrentIndex方法设置当前显示的图片索引。

最后，使用van-image-preview组件实现图片预览功能。通过v-model:show绑定previewVisible变量控制预览图片的显示与隐藏。