移动端 使用vant 预览图片

<img
                  v-for="(item, index) in appealPhoto"
                  :key="index"
                  alt=""
                  :src="item.url"
                  width="80"
                  height="80"
                  style="padding: 5px"
                  @click="handleImg(index)"
                />
              </div>

import Vue from 'vue'; 
import { ImagePreview } from 'vant'; // 全局注册
Vue.use(ImagePreview); // 局部注册
export default
{ components: { [ImagePreview.Component.name]: ImagePreview.Component, }, };

 //点击预览图片 vant
    handleImg(i){
      let previewArr = this.appealPhoto.map((v) => {
        return v.url
      })
      //需要数组例子
      images: [ 'https://img01.yzcdn.cn/vant/apple-1.jpg', 'https://img01.yzcdn.cn/vant/apple-2.jpg', ],
      ImagePreview({
        images: previewArr,//图片数组  [URL，URL] 
        showIndex: true,
        loop: true,
        startPosition: i
      });
    },