Avatar 头像
用于展示用户或对象头像,支持文字占位与图片两种形态。
基础用法
文字头像
文字头像取内容首字符渲染;无任何内容时显示 ? 占位。
尺寸
尺寸变体
图片头像
图片头像
头像组
头像组
多个 oas-avatar 由 oas-avatar-group 包裹后按顺序向左重叠陈列。
最大展示数
设置 max 后超出部分隐藏,末尾显示 +N 计数圆点。
统一尺寸
size 统一组内所有头像尺寸(px),无需逐个设置;配合 max 时,+N 计数圆点同步适配尺寸。
统一尺寸 size
徽标角标
badge 在头像右上角叠加徽标(文本或布尔);布尔形式(无值)显示小圆点;badge-dot 强制圆点变体;badge-color 切换彩色;badge-placement 可将角标放到右下角。
文字徽标
圆点徽标
位置与图片头像
加载失败回退
图片加载失败时自动回退到占位:优先 fallback 命名插槽内容,其次内容首字符,最后 ?。
失败回退到首字符
自定义 fallback 插槽
空态兜底
无内容兜底
API
oas-avatar
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
alt | 图片替代文本 | — | — |
badge | 头像右上角叠加的徽标文本;布尔形式(无值)显示小圆点 | string | — |
badge-color | 徽标颜色:primary/success/warning/danger | string | danger |
badge-dot | 小圆点徽标变体(不显示文本) | boolean | — |
badge-placement | 徽标位置:top-right(默认)/bottom-right | string | top-right |
size | 头像尺寸(px) | string | 32 |
src | 图片地址,存在时渲染图片头像 | string | — |
| 名称 | 说明 |
|---|---|
fallback | 图片加载失败(或头像无内容)时的自定义占位内容 |
oas-avatar-group
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
max | 最大展示头像数,超出显示 +N 计数圆点 | string | — |
size | 统一头像尺寸(px),计数圆点同步适配 | string | — |
| 名称 | 说明 |
|---|---|
| 默认 | — |