vant代码实现图片小尺寸显示点击放大查看

你可以使用Vant的图片组件和弹出层组件来实现图片小尺寸显示和点击放大查看的功能。下面是一个简单的示例代码：

<template>
  <div>
    <van-image
      v-for="(image, index) in images"
      :key="index"
      :src="image.thumb"
      :width="100"
      :height="100"
      @click="showImage(index)"
    />
    <van-popup v-model="showPopup" position="top">
      <van-image
        v-if="currentImageIndex !== -1"
        :src="images[currentImageIndex].original"
        fit="contain"
        :width="windowWidth"
        :height="windowHeight"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { thumb: 'thumb1.jpg', original: 'original1.jpg' },
        { thumb: 'thumb2.jpg', original: 'original2.jpg' },
        { thumb: 'thumb3.jpg', original: 'original3.jpg' },
      ],
      showPopup: false,
      currentImageIndex: -1,
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
    };
  },
  methods: {
    showImage(index) {
      this.currentImageIndex = index;
      this.showPopup = true;
    },
  },
};
</script>

在上面的代码中，我们首先使用van-image组件来显示缩略图，设置了宽度和高度为100px，并绑定了点击事件@click。点击缩略图时，会调用showImage方法来显示大图。

在showImage方法中，我们将当前点击的图片索引赋值给currentImageIndex，并将showPopup设置为true，这样弹出层组件van-popup就会显示出来。

在van-popup中，我们使用van-image组件来显示大图，设置fit为contain以保持比例，并根据窗口的宽度和高度来设置图片的宽度和高度。

注意：上面的代码中的图片路径是示例路径，你需要根据实际情况修改为你自己的图片路径