Avatar 头像
- Avatar 头像组件可以用来代表人物或对象, 支持使用图片、文字作为 Avatar。
何时使用
- 展示用户头像
基本用法
- 已经提供
width、height
属性,所以不在提供size
默认值属性。
张三
张
LI
HL
王
展示规则
- 显示优先级排序
imgSrc > customText > name
- 头像显示基本规则
- 中文开头:取传入字符串的最后两个字符
- 英文开头:取传入字符串的前面两个字符
- 多个英文名连用:取传入字符串的前两个英文名首字母
- 非中英文开头:取传入字符串的前两个字符
Avatar参数
参数 | 类型 | 默认 | 说明 |
---|---|---|---|
name | string | - | 必选,传入字符串用于制作头像 (可以不传 展示默认) |
gender | GenderType | - | 可选,根据性别区分头像颜色 |
width | number | 36 | 可选,设定组件的宽度, 单位为 px |
height | number | 36 | 可选,设定组件的高度,单位为 px |
isRound | boolean | true | 可选,是否显示为圆形 |
imgSrc | string | - | 可选,传入自定义图片作为头像 |
customText | string | - | 可选,传入自定义显示文字,不做处理 |
fit | FitType | cover | 内容应该如何适应到其使用高度和宽度 |
Avatar类型定义
GenderType
ts
export type GenderType = 'male' | 'female' | string;
FitType
ts
export type FitType = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
Avatar事件
- 无