avatar头像

文字头像

Avatar.vue 组件

<template>
  <div class="avatar">
    <span class="avatar-text">{{ firstLetter }}</span>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    firstLetter() {
      return this.name.charAt(0).toUpperCase(); // 获取名字的第一个字母
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 50px;         /* 设置宽度 */
  height: 50px;        /* 设置高度 */
  display: flex;       /* 使用 flexbox 对齐 */
  justify-content: center; /* 居中对齐 */
  align-items: center; /* 垂直居中 */
  background-color: #007bff; /* 头像背景颜色 */
  color: white;        /* 文字颜色 */
  border-radius: 50%;  /* 圆形头像 */
  font-size: 24px;     /* 字体大小 */
}
</style>

使用

<template>
  <div>
    <Avatar name="张三" />
    <Avatar name="李四" />
  </div>
</template>

<script>
import Avatar from './Avatar.vue';

export default {
  components: {
    Avatar
  }
}
</script>