update

src/components/XImage/XImageSmallList.vue

@@ -0,0 +1,44 @@
+<script setup>
+const {list, size} = defineProps({
+    list: {
+        type: Array,
+        default: []
+    },
+    size: {
+        type: String,
+        default: "40px"
+    }
+});
+</script>
+
+<template>
+    <div class="x-image-small-list">
+        <a-image :width="size" :height="size" :src="list[0]" v-bind="$attrs"></a-image>
+        <div class="x-image-small-list-mask" v-if="list.length > 1">
+            +{{ list.length - 1 }}
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.x-image-small-list {
+    width: v-bind(size);
+    height: v-bind(size);
+    overflow: hidden;
+    position: relative;
+    border-radius: 6px;
+
+    .x-image-small-list-mask {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background-color: rgba(0, 0, 0, .3);
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+</style>