Skip to content

# Avatar 头像 ​

Avatar 组件可以用来代表人物或对象， 支持使用图片、图标或者文字作为 Avatar。

## 基础用法 ​

使用 `shape` 和 `size` 属性来设置 Avatar 的形状和大小。

## 头像大小 ​

图片的 `size` 也支持使用 `string` 类型来设置尺寸大小，例如： `xs` , `s` , `md` , `lg` 。

## 展示类型 ​

支持使用图片或者文字作为 Avatar。

图片加载失败时，可以使用 `error` 属性触发函数，默认触发图片填充效果。

当使用图片作为用户头像时，使用 `object-fit` 属性设置该图片如何在容器中展示。

## Avatar API ​

### Avatar 属性 ​

属性 | 说明 | 类型 | 默认值
--- | --- | --- | ---
src | 图片资源的路径 | `string` | -
size | 尺寸大小 | `number` / `enum` `xs` | `sm` | `lg` | `''` | 50
shape | 头像的形状 | `enum` `square` | `circle` | `''` | circle
fit | 头像的填充效果 | `enum` `fill` | `contain` | `cover` | `''` | cover

### Avatar 事件 ​

名称 | 说明 | 回调参数
--- | --- | ---
error | 图片加载失败时触发 | `Function` `(evt: MouseEvent) => void`

### Avatar 插槽 ​

插槽名 | 说明
--- | ---
default | 自定义默认内容