minnan-website/components/dynamicf/Display/ShowImageList.vue

<template>
  <span v-if="!images||images.length==0">无图片</span>
  <div v-else-if="images" class="image-list">
    <a-image 
      v-for="(image, k) in (showAll ? images : images.filter((_: unknown, i: number) => i < maxCount))"
      :key="k"
      :width="imgSize"
      :height="imgSize"
      :src="image"
      :fallback="failImage"
    />
    <div v-if="images.length > maxCount" class="overflow-count" :style="{ 
      width: `${imgSize}px`, 
      height: `${imgSize}px`,
      lineHeight: `${imgSize}px`,
    }" @click="showAll=!showAll">
      {{showAll ? '折叠' : `+${images.length - maxCount}` }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from "vue";

export default defineComponent({
  name: "ShowImageList",
  props: {
    images: {
      type: Object as PropType<Array<string>>,
      default: null,
    },
    size: {
      type: [Number,String],
      default: 30,
    },
    maxCount: {
      type: Number,
      default: 5,
    },
    failImage: {
      default: () => require('@/assets/images/failed.svg'),
      type: String
    },
  },
  computed: {
    imgSize() : number {
      if (typeof this.size === 'string')
        switch(this.size) {
          case 'default': return 45;
          case 'middle': return 30;
          case 'small': return 20;
        }
      return this.size as number;
    },  
  },
  data() {
    return {
      showAll: false,
    };
  },
});
</script>

<style lang="scss">
.image-list {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

  .overflow-count {
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    cursor: pointer;
  }
  .ant-image {
    background-color: #ececec;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>