头像 Avatar

对应 Arco Avatar，支持文字、图标、尺寸与头像组。 属性用法见 Element Plus 文档。

尺寸与形状

size 和 shape 对应 Arco 的尺寸与形状。

AABCD

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue'
</script>

<template>
  <el-avatar size="small">A</el-avatar>
  <el-avatar>AB</el-avatar>
  <el-avatar size="large">C</el-avatar>
  <el-avatar shape="square">D</el-avatar>
  <el-avatar :icon="UserFilled" />
</template>

头像组

el-avatar-group 将头像叠放，并显示分隔描边。

ABC

<template>
  <el-avatar-group>
    <el-avatar>A</el-avatar><el-avatar>B</el-avatar><el-avatar>C</el-avatar>
  </el-avatar-group>
</template>

与 Arco 的差异

• 长文字不会像 Arco 一样自动缩小，建议使用简短缩写。