storevisit-ui-mobile/src/components/deleteUploadImg3.vue

<template>
  <div style="padding: 14px;background-color: #fff;">
  <van-row gutter="10" >
    <van-col span="6" v-for="(urls, index) in imgs" :key="index">
      <div class="imgview">
        <van-icon name="close" size="16" v-on:click="deleteImg(index)"/>
        <img :src="urls" width="100px" height="100px" @click="previewsImg(index)"/>
      </div>
    </van-col>
  </van-row>
  </div>
</template>

<script>
import {ImagePreview} from "vant";
import {removePhoto} from "@/api/index";

export default {
  name: 'deleteUploadImg',
  props: {
    imgs: {
      type: Array,
      default() {
        return []
      }
    },
  },
  methods: {
    deleteImg(index) {
      this.imgs.splice(index, 1);
    },
    previewsImg(index) {
      var arrimg = []
      for (var imgi = 0; imgi < this.imgs.length; imgi++) {
        arrimg.push(this.imgs[imgi])
      }
      ImagePreview({
        images: arrimg,
        startPosition: index
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.imgview {
  width: 100%;
  height: 72px;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  i {
    position: absolute;
    right: -2px;
    top: -3px;
    color: white;
    background: red;
    overflow: hidden;
    border-radius: 50%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>