Skip to content

Avatar 头像

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

何时使用

展示用户头像

基本用法

已经提供 width、height 属性,所以不在提供 size 默认值属性。

展示规则

  • 显示优先级排序 imgSrc > customText > name
  • 头像显示基本规则
    1. 中文开头:取传入字符串的最后两个字符
    2. 英文开头:取传入字符串的前面两个字符
    3. 多个英文名连用:取传入字符串的前两个英文名首字母
    4. 非中英文开头:取传入字符串的前两个字符

Avatar参数

参数类型默认说明
namestring-必选,传入字符串用于制作头像 (可以不传 展示默认)
genderGenderType-可选,根据性别区分头像颜色
widthnumber36可选,设定组件的宽度, 单位为 px
heightnumber36可选,设定组件的高度,单位为 px
isRoundbooleantrue可选,是否显示为圆形
imgSrcstring-可选,传入自定义图片作为头像
customTextstring-可选,传入自定义显示文字,不做处理
fitFitTypecover内容应该如何适应到其使用高度和宽度

Avatar类型定义

GenderType

ts
export type GenderType = 'male' | 'female' | string

FitType

ts
export type FitType = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'

Avatar事件

Released under the MIT License.