Avatar 头像

用于展示用户头像，支持图片、文字、图标三种内容，以及头像组。

基础用法

U

图片、文字、默认图标三种展示方式

vue

<script setup lang="ts">
import { AAvatar } from "@lite-code/aui-vue";
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap">
    <AAvatar />
    <AAvatar>U</AAvatar>
  </div>
</template>

尺寸

SML56

内置 sm / md / lg，也可传数字自定义像素尺寸

vue

<script setup lang="ts">
import { AAvatar } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <AAvatar size="sm">S</AAvatar>
    <AAvatar size="md">M</AAvatar>
    <AAvatar size="lg">L</AAvatar>
    <AAvatar :size="56" background="#6366f1" color="#fff">56</AAvatar>
  </div>
</template>

形状

圆方AB

支持圆形（circle）和方形（square）

vue

<script setup lang="ts">
import { AAvatar } from "@lite-code/aui-vue";
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap">
    <AAvatar shape="circle">圆</AAvatar>
    <AAvatar shape="square">方</AAvatar>
    <AAvatar shape="square" background="#10b981" color="#fff">AB</AAvatar>
  </div>
</template>

头像组

ABC+2

AAvatarGroup 将多个头像叠加展示，超出 max 时显示 +N

vue

<script setup lang="ts">
import { AAvatar, AAvatarGroup } from "@lite-code/aui-vue";
</script>

<template>
  <AAvatarGroup :max="3">
    <AAvatar background="#6366f1" color="#fff">A</AAvatar>
    <AAvatar background="#10b981" color="#fff">B</AAvatar>
    <AAvatar background="#f59e0b" color="#fff">C</AAvatar>
    <AAvatar background="#ef4444" color="#fff">D</AAvatar>
    <AAvatar background="#8b5cf6" color="#fff">E</AAvatar>
  </AAvatarGroup>
</template>

API

AAvatar Props

属性	类型	默认值	说明
src	string	—	图片地址
alt	string	''	图片 alt 文字
shape	AvatarShape	'circle'	形状：circle | square
size	AvatarSize	'md'	尺寸：sm | md | lg | number
color	string	—	字体颜色
background	string	—	背景色
gap	number	4	文字缩放时的边距（px）
className	string	—	自定义 class
style	object	—	自定义样式

AAvatar Slots

插槽	说明
default	文字内容（自动缩放）
icon	自定义图标（无 src 时）

AAvatarGroup Props

属性	类型	默认值	说明
max	number	—	最多显示数量，超出则显示 +N
size	AvatarSize	—	统一设置子 Avatar 尺寸
shape	AvatarShape	—	统一设置子 Avatar 形状
className	string	—	自定义 class
style	object	—	自定义样式

类型

type AvatarShape = "circle" | "square";
type AvatarSize = "sm" | "md" | "lg" | number;