Avatar 头像

概述

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

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "头像",
  "usingComponents": {
    "fui-avatar": "/components/firstui/fui-avatar/fui-avatar"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-avatar": "components/firstui/fui-avatar/fui-avatar"
}

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

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

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

使用图片头像

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

<fui-avatar src="/static/images/common/img_logo.png"></fui-avatar>

自定义图标

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

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

Slots

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

Props

属性名	类型	说明	默认值	其他说明
src	String	头像图片资源地址	-	-
errorSrc V1.8.0+	String	图片加载失败时默认图片资源地址，仅src传值时有效	-	-
mode	String	头像图片裁剪、缩放的模式	scaleToFill	-
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 V1.9.8+	Boolean	是否设置为块状元素	false	-
index	Number	在列表中的索引值	0	-
params	Number, String	其他参数	0	-

Events

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

示例预览