# Avatar 头像

概述

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

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiAvatar from "@/components/firstui/fui-avatar/fui-avatar.vue"
export default {
	components:{
		fuiAvatar
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手

如果不了解easycom,可先查看 官网文档 (opens new window)

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档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>
1
2
3
使用图片头像

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

<fui-avatar src="/static/images/common/img_logo.png"></fui-avatar>
1
自定义图标

textsrc 属性不传值则不显示,可通过插槽自定义显示内容。

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

# Slots

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

# Props

属性名 类型 说明 默认值 平台差异说明
src String 头像图片资源地址 - -
errorSrc V1.8.0+ String 图片加载失败时默认图片资源地址,仅src传值时有效 - -
mode String 头像图片裁剪、缩放的模式 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 -
index Numbe 在列表中的索引值 0 -
params Number, String 其他参数 0 -

# Events

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

示例预览

# 示例代码地址

FirstUIAvatar 头像
Last Updated: 9/29/2022, 1:07:59 AM