vue结合vant写图片预览功能

App图片预览需求(前提配置好了vant)

如果还没有配置的话，配置步骤如下
官网链接：https://youzan.github.io/vant/#/zh-CN/grid
步骤1：下载依赖

npm i vant --save

// 如果有淘宝镜像的话也可以使用（下载的速度会快些  --save，可以在package.json查看）

cnpm i vant --save

步骤2：在全局main.js中配置

// 引入 vant
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

步骤3：在需要使用的页面引入图片预览的组件

import Vue from 'vue';
import { ImagePreview } from 'vant';
Vue.use(ImagePreview);

步骤4：我在html页面中使用

// item.picUrl是接口的一条数据里面的图片数组
 <div v-for="(image, i) in item.picUrl" :key="i">
      <img
	      :src="image"
	      alt="预览图片"
	      @click="getImg(image, i, item.picUrl)"
	      style="width:100%;"
	    />
	  </div>

步骤4：methods方法中

// 预览图片
    getImg(image, i, e) {
    // image为当前的图片地址
    // i为下标
    // e为当前数组数据
      console.log(image, i, e);
      ImagePreview({
        images: e,
        showIndex: true,
        loop: false,
        startPosition: i
      });
    }

好了，从配置 vant 到实现图片预览的功能，就这些了，是不是也不太难。
喜欢的话，可以留下一片云彩啊，大佬们觉得有什么问题的话，可以指正一下，再次感谢，希望对你们有所帮助。