Vant 代码实现前台已展示照片点击放大 - 前端开发教程

你可以使用vant组件库中的Image组件来实现点击图片放大的功能。

首先，你需要在你的项目中引入vant组件库。可以使用npm安装：

npm install vant

然后在你的代码中引入Image组件和相关样式：

import { Image } from 'vant';
import 'vant/lib/index.css';

接下来，你可以在你的模板中使用Image组件来展示照片，并且添加点击事件来放大照片：

<template>
  <div>
    <Image
      v-for='(photo, index) in photos'
      :key='index'
      :src='photo.url'
      @click='showPhoto(index)'
    />
  </div>
</template>

在你的script中，你需要定义一个data属性来存储照片列表，并且定义showPhoto方法来处理点击事件：

export default {
  data() {
    return {
      photos: [
        { url: 'photo1.jpg' },
        { url: 'photo2.jpg' },
        { url: 'photo3.jpg' }
      ],
      show: false,
      currentPhotoIndex: 0
    };
  },
  methods: {
    showPhoto(index) {
      this.currentPhotoIndex = index;
      this.show = true;
    }
  }
}

最后，在你的模板中添加一个Dialog组件来展示放大后的照片：

<template>
  <div>
    <Image
      v-for='(photo, index) in photos'
      :key='index'
      :src='photo.url'
      @click='showPhoto(index)'
    />
    <van-dialog v-model='show' :show-close-button='true'>
      <Image :src='photos[currentPhotoIndex].url' />
    </van-dialog>
  </div>
</template>

这样，当你点击展示的照片时，会弹出一个对话框来放大照片。