2.0.12 • Published 3 years ago
@hecom/image-avatar v2.0.12
AvatarImage
这是一个正多边形头像组件，是支持群组头像。
群组头像最多支持显示四个成员。
关于默认头像
未设置远程头像路径时，如果名字中有中文，则获取最后一个中文字符；如果没有中文，则获取第一个字符，作为头像文字
可用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| user | User | undefined | 人员对象，单人头像时的快捷属性 |
| users | User[] | [] | 人员数组，群组头像时使用，如果users.length大于0，user属性不生效 |
| size | number | 48 | 视图的宽高 |
| radius | number | size/12 | 圆角大小（使用二次贝塞尔曲线实现） |
| sepWidth | number | 1 | 群组头像时内部分隔线的宽度 |
| colors | string[] | '#3EAAFF', '#47C2E7', '#FD6364', '#FDC63F', '#BEE15D', '#28D9C1', '#FF9D50' | 默认头像背景色 |
| defOuterBorderColors | string[] | '#CBE7FF', '#DAF6FF', '#FFE1E1', '#FCF1D8', '#E6F5BE', '#D3F9F4', '#FFE4CD' | 默认头像边框颜色 |
| renderAvatar | func | undefined | 自定义头像渲染方法 |
| getThumbUrl | func | undefined | (url:string)=> string,获取缩略图方法 |
| numberOfSides | number | 6 | 正多边形边数 |
| borderEnable | boolean | false | 是否使用边框 |
| border | Border | undefined | 边框参数 |
User类型
interface User {
code: number // 编号，用于确定默认头像颜色
name: string // 名称
avatar?: string // 头像
}Border类型
interface Border {
innerBorderWidth?: number // 内边框宽度，默认：1
innerBorderColor?: string // 内边框颜色，默认：#FFFFFF
outerBorderWidth?: number // 外边框宽度，默认：2
outerBorderColor?: string // 外边框颜色，默认：#F1F1F1
borderSpace?: number // 内外边框间距，默认：size / 24
}