头像 flex布局 多头像九宫格 自适应布局

需求

一个人显示头像，
两个人显示对方头像
更多人见下图：

参考了链接

组件代码

<template>
    <div class="group-avatar" v-if="groupMembers.length">
        <tm-avatar v-if="groupMembers.length==1 || groupMembers.length==2" :src="avatar" shape="square" :size="size" class="user-avatar"></tm-avatar>
        <div v-else class="avatar">
            <tm-avatar shape="square" v-for="(item,index) in groupAvatarUrls" :key="'avatar_'+index" :src="item" :size="size" v-if="index < 9">
            </tm-avatar>
        </div>

    </div>
</template>


<script lang="ts">
    import { Vue, Component, Prop } from "vue-property-decorator";
    import Avatar from '@/renderer/components/Avatar.vue';
    import { Member } from "@/main/xim/models";

    @Component({ components: { Avatar } })
    export default class TmGroupAvatar extends Vue {
        @Prop({ type: String, required: true, validator: value => ["user", "users", "self"].includes(value)})
        private readonly chatType!: "user" | "users" | "self";

        @Prop({ type: Number, required: true })
        private readonly chatId!: number;

        size:number = 0;
        groupMembers:string[] = [];
        groupAvatarUrls:string[] = [];

        /**
         * 成员信息
         */
        get membersMap() {
            return this.$store.state.contactsCache.membersMap;
        }

        async created(){
            let chatA = await app.xchat.fetchChat([this.chatType, this.chatId]);
            this.groupMembers = (<Member[]>chatA.members).map(item => item.eid);
            this.groupAvatarUrls = this.groupMembers.map(eid => this.membersMap[eid] ? this.membersMap[eid].avatar_url : "" );
            this.computedAvatar();
        }

        //计算头像布局
        computedAvatar() {
            if(this.groupAvatarUrls.length > 4) {
                this.size = 12;
            }else if(this.groupAvatarUrls.length > 2) {
                this.size = 18;
            }else {
                this.size = 40;
            }
        }

        get avatar(){
            if (this.groupMembers.length == 1){
                return this.membersMap[app.member!.empid].avatar_url;
            }else if (this.groupMembers.length == 2){
                let otherPerson = this.groupMembers.filter(eid => eid != app.member!.empid);
                if (otherPerson.length){
                    return this.membersMap[otherPerson[0]] && this.membersMap[otherPerson[0]].avatar_url;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .avatar {
        width: 40px;
        height: 40px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap-reverse;
        border: #000 1px solid;
        /*margin: 30px;*/
    }
    .avatarImg {
        width: 40px;
        height: 40px;
    }

    .avatarItem--1 {
        width: 98%;
        height: 98%;
    }

    .avatarItem--2 {
        width: 47%;
        height: 47%;
        margin: 1%;
    }

    .avatarItem--3 {
        width: 32%;
        height: 30%;
        margin: 1%;
    }

</style>
···