Avatar 头像

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

基础用法

使用 shapesize 属性来设置 Avatar 的形状和大小。

展示类型

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

回退行为

图片加载失败时的回退行为。

适应容器

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

Avatar API

Avatar 属性

名称说明类型默认值是否必需
icon设置 Avatar 的图标类型,具体参考 Icon 组件string | Component
sizeAvatar 大小number | 'large' | 'default' | 'small''default'
shapeAvatar 形状'circle' | 'square''circle'
srcAvatar 图片的源地址string
src-set图片 Avatar 的原生 srcset 属性string
alt图片 Avatar 的原生 alt 属性string
fit当展示类型为图片的时候,设置图片如何适应容器'fill' | 'contain' | 'cover' | 'none' | 'scale-down''cover'

Avatar 事件

名称说明类型
error图片加载失败时触发(e: Event) => void

Avatar 插槽

插槽名说明
default自定义头像展示内容

源代码

组件文档

贡献者