Vant 图片预览组件 - 前端照片放大展示

1. 首先，在你的 HTML 文件中引入 Vant 的 CSS 和 JS 文件：

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vant@2.12.14/dist/vant.min.css'>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vant@2.12.14/dist/vant.min.js'></script>

2. 创建一个 Vue 实例，并在实例中注册 Vant 的 ImagePreview 组件：

new Vue({
  el: '#app',
  components: {
    [ImagePreview.name]: ImagePreview
  },
  data() {
    return {
      photos: [
        'https://example.com/photo1.jpg',
        'https://example.com/photo2.jpg',
        'https://example.com/photo3.jpg'
      ]
    }
  },
  methods: {
    openPreview(index) {
      ImagePreview({
        images: this.photos,
        startPosition: index
      })
    }
  }
})

3. 在你的 HTML 文件中使用 v-for 指令来展示照片，并绑定点击事件来调用 openPreview 方法：

<div id='app'>
  <div v-for='(photo, index) in photos' :key='index' @click='openPreview(index)'>
    <img :src='photo' alt='照片'>
  </div>
</div>

这样，当你点击照片时，就会使用 Vant 的 ImagePreview 组件进行放大展示。