Avatar 头像，用图标、图片或者字符的形式展示用户或事物信息。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

通过 size 属性设置头像大小，text 属性设置显示文本，background 属性设置背景色。

<wui-avatar size="small" text="A"></wui-avatar>
<wui-avatar text="B"></wui-avatar>
<wui-avatar text="刘" background="#FFB703"></wui-avatar>

使用图片头像

通过 src 属性设置头像图片资源地址，设置 src 后，text 属性失效。

<wui-avatar src="xxxxxx.png"></wui-avatar>

自定义图标

text 或 src 属性不传值则不显示，可通过插槽自定义显示内容。

<wui-avatar>
  <wui-icon name="my-fill" color="#fff"></wui-icon>
</wui-avatar>

Slots

插槽名称	说明
default	自定义内容展示

Props

属性名	类型	说明	默认值	平台差异说明
src	String	头像图片资源地址	-	-
errorSrc	String	图片加载失败时默认图片资源地址，仅src传值时有效	-	-
mode	String	头像图片裁剪、缩放的模式	scaleToFill	nvue端如果设置为widthFix，若图片不是正方形可能导致设置圆角失效
lazyLoad	Boolean	图片懒加载。只针对page与scroll-view下的image有效	true	微信小程序、百度小程序、字节跳动小程序
webp	Boolean	默认不解析 webP 格式，只支持网络资源	false	微信小程序2.9.0
background	String	头像背景色	#D1D1D1	-
size	String	头像大小，可选值：small、middle、large，不设置width时生效	middle	-
width	Number, String	头像宽度，单位rpx，设置大于0的数值生效，自定义宽度后size失效	0	-
height	Number, String	默认等宽，设置图大于0的数值且设置了图片宽度生效	0	-
shape	String	指定头像的形状，可选值为 circle、square	circle	-
radius	Number, String	头像圆角值，单位rpx，当设置大于等于0的数值时，shape失效	-1	-
text	String	头像文本内容，未设置src时生效	-	-
color	String	头像文本颜色	#fff	-
fontSize	Number, String	头像文本字体大小，设置大于0的数值生效	0	-
fontWeight	Number, String	头像文本字重	600	-
marginRight	Number, String	头像margin-right值，单位rpx	0	-
marginBottom	Number, String	头像margin-bottom值，单位rpx	0	-
block	Boolean	是否设置为块状元素	false	Nvue端默认为块状元素
index	Numbe	在列表中的索引值	0	-
params	Number, String	其他参数	0	-

Events

事件名	说明	回调参数
@click	点击头像时触发	{ index:索引值 params：其他参数 }
@error	图片加载失败时触发，当src传值时有效	{ index:索引值 params：其他参数 }