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

<template>
  <div>
    <van-row gutter="10" >
      <van-col span="4" v-for="(urls, index) in imgs" :key="index">
        <div class="img-box">
          <img :src="urls.fileUrl"  @click="previewsImg(index)"/>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import {ImagePreview} from "vant";

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.img-box {
  width: 100%;
  height: 50px;
  position: relative;
  display: inline-block;
  border-radius:6px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>