@hecom/image-avatar
v2.0.12
Published
Avatar Image Component
Downloads
4
Readme
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
}