rice-ui

暗黑模式

Avatar 头像 ​

手机扫码预览
01:50
组件名：rice-avatar

用于展示用户的头像

平台兼容性 ​

uni-app x ​

AndroidiOS鸿蒙Next微信小程序h5
√√√√√

基础用法 ​

  • 通过 src 设置头像的链接
  • round 为 false 时展示方形头像
html
<rice-avatar src="/static/images/avatar-square.png" />
<rice-avatar src="/static/images/avatar-square.png" :round="false"/>

字符头像 ​

通过 text 属性设置头像为字符类型，此时需要传递头像的背景色和字符的颜色，大小

html
<rice-avatar text="A" bg-color="#ffb34b" font-size="20px" />
<rice-avatar text="李" bg-color="#f0ebf7" color="#9c7e62" />
<rice-avatar text="王" bg-color="#d9e1ff" color="#0052d9" />

图标头像 ​

通过 icon 属性设置头像为 图标类型

html
<rice-avatar icon="star" bg-color="#afaae4" font-size="22px" />
<rice-avatar icon="user" bg-color="#77b1cc" font-size="22px" />

默认头像 ​

头像加载失败后会自动替换成默认头像

html
<rice-avatar />

自定义圆角 ​

通过 radius 设置头像的圆角值

html
<rice-avatar src="/static/images/avatar-square.png" radius="8px" />

头像尺寸 ​

通过 size 属性设置头像的尺寸，可以指定为large,mini 或者具体数值

html
<rice-avatar size="mini" src="/static/images/avatar-square.png" />
<rice-avatar size="52px" src="/static/images/avatar-square.png" />
<rice-avatar size="large" src="/static/images/avatar-square.png" />

API ​

Props ​

属性名类型说明默认值
srcString头像路径，不能为相对路径-
roundBoolean是否圆形-
radiusString|Number圆角-
sizeString|Number头像尺寸，可以指定为large,mini 或者数值-
modeString图片裁剪、缩放的模式，与 image 组件 mode参数 一致-
textString|Number用文字代替图片，优先级高于 src-
iconString显示的图标，优先级高于 src 和 text-
bg-colorString头像的背景颜色，一般显示文字时使用-
colorString文字颜色-
font-sizeString|Number文字/icon大小-
default-urlString加载失败时的默认头像-
custom-styleObject自定义样式-

Events ​

事件名说明回调参数
click点击头像时触发-
error头像加载失败时触发event: UniImageErrorEvent|null

类型定义 ​

组件导出如下类型

ts
// 组件类型
const avatarRef = ref<RiceAvatarComponentPublicInstance | null>(null)