模仿微信头像 单人 以及群聊的 头像

模仿微信头像 单人 以及群聊的 头像

<template>
  <div>
    <div class="avatar-wrap">
      <template v-if="avatar.length==1">
        <el-avatar :src="avatar[0]" shape="square" class="horizonta-1"></el-avatar>
      </template>
      <template v-else-if="avatar.length>=2&&avatar.length<=4">
        <el-avatar v-for="(item ,index) in avatar" :key="index" shape="square" :src="item" class="horizonta-2"></el-avatar>
      </template>
      <template v-else>
        <el-avatar v-for="(item ,index) in avatar" :key="index" shape="square" :src="item" class="horizonta-3"></el-avatar>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    avatar: {
      type: Array,
      default: _ => []
    }
  }
}
</script>
<style lang="scss">
.avatar-wrap {
  width: 66px;
  height: 66px;
  background: #f2f2f2;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap-reverse;
  .el-avatar {
    margin: 1px;
    &.horizonta-1,
    .horizonta-1 img {
      width: 66px;
      height: 66px;
    }
    &.horizonta-2,
    .horizonta-2 img {
      width: 30px;
      height: 30px;
    }
    &.horizonta-3,
    .horizonta-3 img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>