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

布局 多头像九宫格 自适应布局"/>

头像 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 : "" );thisputedAvatar();}//计算头像布局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>
···