Avatar 头像

Avatar 头像组件用于展示用户头像、品牌标识或其他圆形内容，支持图片、文字（slot / name）、图标等多种展示方式。

基础用法

Avatar

图片、名称、图标与默认内容。

示例即将加载...

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar name="Talex DreamSoul" />
    <TxAvatar icon="user" />
    <TxAvatar>U</TxAvatar>
  </div>
</template>

头像尺寸

提供 small/medium/large/xlarge 四种预设尺寸。

示例即将加载...

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar size="small" src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar size="medium" src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar size="large" src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar size="xlarge" src="https://avatars.githubusercontent.com/u/1?v=4" />
  </div>
</template>

文字头像

使用文字作为头像内容。

示例即将加载...

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar>张</TxAvatar>
    <TxAvatar>AB</TxAvatar>
    <TxAvatar>User</TxAvatar>
  </div>
</template>

图标头像

使用图标作为头像内容。

示例即将加载...

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar icon="user" />
    <TxAvatar icon="team" />
  </div>
</template>

头像组

叠放头像并限制最大数量。

示例即将加载...

<template>
  <TxAvatarGroup :max="3" size="small" :overlap="10">
    <TxAvatar src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar src="https://avatars.githubusercontent.com/u/2?v=4" />
    <TxAvatar src="https://avatars.githubusercontent.com/u/3?v=4" />
    <TxAvatar src="https://avatars.githubusercontent.com/u/4?v=4" />
    <TxAvatar src="https://avatars.githubusercontent.com/u/5?v=4" />
  </TxAvatarGroup>
</template>

状态

展示在线状态角标。

示例即将加载...

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar status="online" name="Online" />
    <TxAvatar status="offline" name="Offline" />
    <TxAvatar status="busy" name="Busy" />
    <TxAvatar status="away" name="Away" />
  </div>
</template>

可点击头像

<template>
  <TxAvatar
    name="Click"
    clickable
    @click="handleAvatarClick"
  />
</template>

契约说明

Avatar fallback 优先级为图片、默认插槽、icon、name 首字母、默认 user 图标。图片加载失败后会进入同一套非图片 fallback 链路。size 支持预设、数字、数字字符串和 px 字符串。TxAvatarGroup 只会给未显式设置 size 的子头像注入统一尺寸，并在 max 隐藏额外头像时渲染 +N。

API 参考

Avatar Props

属性名	类型	默认值	说明
src		-	头像图片地址
alt		-	图片替代文本
name		-	名称（用于生成首字母 fallback）
icon		-	icon 名称（基于 TxIcon）
size	smallmediumlargexlarge		头像尺寸
status	onlineofflinebusyaway	-	状态
clickable			是否可点击
backgroundColor		-	自定义背景色
textColor		-	自定义文字色

Avatar Events

属性名	类型	默认值	说明
click		-	点击头像时触发（仅 clickable=true）

Avatar Slots

属性名	类型	默认值	说明
default	-	-	自定义头像内容（优先级高于 icon/name）