Avatar 头像
头像组件用于展示用户或事物的头像，支持图片、图标和文字三种显示方式。
基础用法
头像的基础用法，支持图片、图标和文字三种显示方式。
U
尺寸
头像支持多种尺寸，包括预设尺寸和自定义数值。
形状
头像支持圆形和方形两种形状。
图片适应
当使用图片头像时，可以设置图片的适应方式。
自定义颜色
可以自定义头像的背景色、文字颜色和图标颜色。
V
K
图片加载失败
当图片加载失败时，可以显示回退内容。
可点击
设置 clickable 属性使头像可点击。
预览功能
启用 preview 属性可以点击头像预览大图。
懒加载
启用 lazy 属性可以实现图片懒加载。
圆角半径
当形状为方形时，可以设置圆角半径。
API
Avatar Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | 'small' | 'default' | 'large' | number | 'default' | 头像大小 |
| shape | 'circle' | 'square' | 'circle' | 头像形状 |
| src | string | — | 图片地址 |
| alt | string | — | 图片替代文本 |
| icon | string | — | 图标名称 |
| fit | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | 'cover' | 图片适应方式 |
| lazy | boolean | false | 是否懒加载图片 |
| preview | boolean | false | 是否启用图片预览功能 |
| placeholder | string | — | 图片加载时显示的占位符 |
| clickable | boolean | false | 是否可点击 |
| backgroundColor | string | — | 背景颜色 |
| color | string | — | 文字颜色 |
| iconColor | string | — | 图标颜色 |
| iconSize | number | — | 图标大小 |
| border | string | — | 边框样式 |
| radius | string | number | — | 圆角半径（方形时有效） |
| fallback | string | — | 图片加载失败时的回退文本 |
Avatar Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击头像时触发 | (event: MouseEvent) |
| error | 图片加载失败时触发 | (event: Event) |
| load | 图片加载成功时触发 | (event: Event) |
Avatar Slots
| 插槽名 | 说明 |
|---|---|
| default | 默认内容 |