Avatar 头像

用于展示用户头像、图标或文字。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 src 属性设置图片头像。

<zq-avatar src="https://example.com/avatar.jpg" />

头像尺寸

支持 mini、small、normal、large 四种尺寸，默认为 normal。

<zq-avatar src="https://example.com/avatar.jpg" size="mini" />
<zq-avatar src="https://example.com/avatar.jpg" size="small" />
<zq-avatar src="https://example.com/avatar.jpg" size="normal" />
<zq-avatar src="https://example.com/avatar.jpg" size="large" />

各尺寸对应大小：

尺寸	大小
mini	48rpx
small	64rpx
normal	80rpx
large	120rpx

头像形状

通过 shape 属性设置形状，支持 circle（圆形）和 square（方形）。

<zq-avatar src="https://example.com/avatar.jpg" shape="circle" />
<zq-avatar src="https://example.com/avatar.jpg" shape="square" />

图标头像

通过 icon 属性设置图标头像。

<zq-avatar icon="user" />

文字头像

通过 text 属性或默认插槽设置文字头像。

<zq-avatar text="A" />
<zq-avatar text="张" bg-color="#07c160" />

自定义背景色

通过 bg-color 属性自定义背景色。

<zq-avatar text="B" bg-color="#ee0a24" />
<zq-avatar icon="star" bg-color="#ff976a" />

图片加载失败

当图片加载失败时会触发 error 事件。

<zq-avatar src="https://example.com/broken.jpg" @error="onError" />

API

Props

参数	说明	类型	默认值
src	图片地址	string	''
icon	图标名称	string	''
text	文字内容	string	''
shape	头像形状	'circle' | 'square'	'circle'
size	头像尺寸	'mini' | 'small' | 'normal' | 'large'	'normal'
bg-color	自定义背景色	string	''（默认使用 --color-primary）

Events

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

Slots

名称	说明
default	自定义文字内容，优先级高于 text 属性

优先级

当同时设置多个内容属性时，优先级为：src > icon > text/slot。

主题定制

变量名	说明
--color-primary	默认背景色