简介

头像组件用于展示用户头像，支持图片、文字、图标三种类型，以及多种尺寸和形状。可以使用fs-badge组件显示徽标来表示状态或消息数量。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "fs-avatar": "ava-ui/fxui/fs-avatar/index"
}

代码演示

API

属性

属性	说明	类型	可选值	默认值
type	头像类型	string	image/text/icon	image
size	头像尺寸	string	small/medium/large	medium
shape	头像形状	string	circle/square	circle
src	图片地址（type为image时使用）	string	—	''
text	文字内容（type为text时使用）	string	—	''
icon	图标名称（type为icon时使用）	string	—	icon-user
bgColor	背景色（type为text或icon时使用）	string	—	#f5f5f5
textColor	文字颜色（type为text或icon时使用）	string	—	#666666
customStyle	自定义样式	string	—	''

尺寸规格说明

头像组件提供三种尺寸，可以在不同场景下选择合适的尺寸。

尺寸	说明	大小(px)	文字大小(px)	使用场景
small	小尺寸	32	14	列表项、评论区
medium	中等尺寸（默认）	48	18	导航栏、卡片
large	大尺寸	64	24	个人资料、详情页

徽标功能

头像组件支持通过fs-badge组件来显示徽标 fs-badge组件支持的属性请参考 fs-badge组件文档。

事件

事件名	说明	回调参数
click	点击头像时触发	event
error	图片加载失败时触发	event
load	图片加载成功时触发	event

说明

• 支持通过 type 属性切换图片、文字、图标三种类型。
• 支持通过 size 属性设置三种不同尺寸：small(32px)、medium(48px)、large(64px)。
• 支持通过 shape 属性切换圆形和方形两种形状。
• 文字头像会自动提取文字的前两个字符或首字母，中文取前两个字符，英文取首字母。
• 图片头像使用fs-image组件，支持头像模式的图片处理。
• 图片加载失败时会自动显示默认图标头像。
• 徽标功能通过fs-badge组件实现，支持数字、文字、图标、小红点等多种徽标类型。
• 组件内部会自动计算样式，包括尺寸、颜色、文字内容等。

打开预览