chat-app/src/components/avatar-module/index.vue

<template>
  <div class="avatar-module" :style="[customStyle, { background: avatar ? '#fff' : '' }]">
    <img :src="avatar" v-if="avatar" />
    <span v-else :style="customTextStyle">{{ text_avatar }}</span>
  </div>
</template>
<script setup>
//群聊默认头像
import groupNormal from '@/static/image/chatList/groupNormal.png'
import groupDepartment from '@/static/image/chatList/groupDepartment.png'
import groupProject from '@/static/image/chatList/groupProject.png'
import groupCompany from '@/static/image/chatList/groupCompany.png'
import { computed, defineProps } from 'vue'

const props = defineProps({
  mode: {
    //模式：1=人；2=群
    type: Number,
    default: 0,
  },
  avatar: {
    //头像
    type: String,
    default: '',
  },
  userName: {
    //用户名称
    type: String,
    default: '',
  },
  groupType: {
    //群类型：1=普通群；2=部门群；3=项目群；4=总群/公司群
    type: Number,
    default: 0,
  },
  customStyle: {
    //自定义样式
    type: Object,
    default() {
      return {}
    },
  },
  customTextStyle: {
    //自定义文字样式
    type: Object,
    default() {
      return {}
    },
  },
})

//头像
const avatar = computed(() => {
  let avatar_img = props?.avatar
  if (!avatar_img) {
    if (props?.mode === 1) {
    } else if (props?.mode === 2) {
      if (props?.groupType === 1) {
        avatar_img = groupNormal
      } else if (props?.groupType === 2) {
        avatar_img = groupDepartment
      } else if (props?.groupType === 3) {
        avatar_img = groupProject
      } else if (props?.groupType === 4) {
        avatar_img = groupCompany
      }
    }
  }
  return avatar_img
})

//文字头像
const text_avatar = computed(() => {
  return props?.userName.length >= 2
    ? props?.userName.slice(-2)
    : props?.userName
})
</script>
<style lang="scss" scoped>
.avatar-module {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #674bbc, #46299d);
  flex-shrink: 0;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>