vue项目开发需要一个图片列表，并进行大图预览
一个图片列表组件，根据图片名称追加图片地址，并结合el-image实现大图预览

图片列表组件

<template>
  <div class="uploadimg">
    <div class="imageItem" :class="{mr0:maxCount==1}" v-for="(item,index) in imgList" :key="index">
      <el-image
        style="width: 100px; height: 100px"
        :src="item"
        :preview-src-list="imgList">
      </el-image>
    </div>
  </div>
</template>

<script>
import configs from '@/config/config.js'

export default {
  data() {
    return {
      imgList: [],
      keyList: []
    }
  },
  components: {},
  props: {
    maxCount: {
      type: Number,
      default() {
        return 100
      }
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  mounted() {
    if (this.list.length > 0) {
      this.getImgListByKey()
    }
  },
  watch: {
    list() {
      if (this.list.length > 0) {
        this.getImgListByKey()
      }
    }
  },
  methods: {
    // 根据key获取图片
    async getImgListByKey() {
      try {
        var that = this
        that.keyList = that.list
        that.imgList = []
        for (const key of that.keyList) {
          that.imgList.push(configs.uploadImg + key)
        }
      } catch (error) {
        console.log(error)
      }
    },
  }
}
</script>

<style scoped lang="scss">
.upload {
  width: 140px;
  height: 140px;
  background: #EDEDED;
  border-radius: 20px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;

  image {
    width: 34px;
  }
}

.uploadimg {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  width: 532px;

  .imageItem {
    margin-right: 24px;
    width: 140px;
    height: 140px;
    position: relative;
    margin-top: 12px;
  }

}

.mr0 {
  margin-right: 0 !important;
}
</style>