Skip to content

Avatar 头像

用户头像展示,支持图片、文字缩略等多种形态。

基本用法

通过 src 加载图片,加载失败时自动显示文字缩略。

UOJD张三
vue
<AAvatar alt="User One" />
<AAvatar alt="John Doe" />
<AAvatar alt="张三" />

尺寸

支持 smmdlg 三种尺寸。

AAA
vue
<AAvatar alt="A" size="sm" />
<AAvatar alt="A" size="md" />
<AAvatar alt="A" size="lg" />

形状

支持 circle(默认)和 square 两种形状。

CISQ
vue
<AAvatar alt="Circle" shape="circle" />
<AAvatar alt="Square" shape="square" />

自定义 fallback

通过 fallback 自定义文字。

UJD
vue
<AAvatar fallback="U" />
<AAvatar fallback="JD" />

API

Props

名称类型默认值说明
srcstring图片地址
altstring替代文本,也用于生成文字缩略
size'sm' | 'md' | 'lg''md'尺寸
shape'circle' | 'square''circle'形状
fallbackstring自定义占位文字

MIT License