ChuFix UI v0.2.1
开发预览 更新于 2026-05-10

Avatar 头像

头像 —— 图片 / 缩写 / 图标三态自动 fallback，5 尺寸 + 圆形/方形 + AvatarGroup 重叠。

基础用法

优先级：src 加载成功 → 显示图片；加载失败或没传 src → fallback / name 缩写；都没有就显示 ?。

背景
头像CQAL?
 
<script setup lang="ts">
import { CfAvatar } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-row">
    <CfAvatar src="https://i.pravatar.cc/80?img=12" alt="头像" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="Anna Lee" />
    <CfAvatar fallback="?" />
  </div>
</template>
<script setup>
import { CfAvatar } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-row">
    <CfAvatar src="https://i.pravatar.cc/80?img=12" alt="头像" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="Anna Lee" />
    <CfAvatar fallback="?" />
  </div>
</template>
import { CfAvatar } from '@chufix-design/react';

export default function Demo() {
return (
  <>
    <CfAvatar src="https://i.pravatar.cc/80?img=12" alt="头像" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="Anna Lee" />
    <CfAvatar fallback="?" />
  </>
);
}
import { CfAvatar } from '@chufix-design/react';

export default function Demo() {
return (
  <>
    <CfAvatar src="https://i.pravatar.cc/80?img=12" alt="头像" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="Anna Lee" />
    <CfAvatar fallback="?" />
  </>
);
}

尺寸与形状

5 档尺寸（xs / sm / md / lg / xl），2 种形状（circle / square）。

背景
CQCQCQCQCQ
BSBS
 
<script setup lang="ts">
import { CfAvatar } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <div class="demo-row" style="align-items: flex-end;">
      <CfAvatar size="xs" name="Chen Qi" />
      <CfAvatar size="sm" name="Chen Qi" />
      <CfAvatar size="md" name="Chen Qi" />
      <CfAvatar size="lg" name="Chen Qi" />
      <CfAvatar size="xl" name="Chen Qi" />
    </div>
    <div class="demo-row">
      <CfAvatar shape="circle" name="Bob Smith" />
      <CfAvatar shape="square" name="Bob Smith" />
    </div>
  </div>
</template>
<script setup>
import { CfAvatar } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <div class="demo-row" style="align-items: flex-end;">
      <CfAvatar size="xs" name="Chen Qi" />
      <CfAvatar size="sm" name="Chen Qi" />
      <CfAvatar size="md" name="Chen Qi" />
      <CfAvatar size="lg" name="Chen Qi" />
      <CfAvatar size="xl" name="Chen Qi" />
    </div>
    <div class="demo-row">
      <CfAvatar shape="circle" name="Bob Smith" />
      <CfAvatar shape="square" name="Bob Smith" />
    </div>
  </div>
</template>
<CfAvatar size="xs" name="Chen Qi" />
<CfAvatar size="sm" name="Chen Qi" />
<CfAvatar size="md" name="Chen Qi" />
<CfAvatar size="lg" name="Chen Qi" />
<CfAvatar size="xl" name="Chen Qi" />

<CfAvatar shape="circle" name="Bob Smith" />
<CfAvatar shape="square" name="Bob Smith" />
<CfAvatar size="xs" name="Chen Qi" />
<CfAvatar size="sm" name="Chen Qi" />
<CfAvatar size="md" name="Chen Qi" />
<CfAvatar size="lg" name="Chen Qi" />
<CfAvatar size="xl" name="Chen Qi" />

<CfAvatar shape="circle" name="Bob Smith" />
<CfAvatar shape="square" name="Bob Smith" />

Fallback 优先级

第二个示例传了一个不存在的 src，自动回退到 name 计算的缩写。最后一个是自定义图标。

背景
正常加载Fallback TestCQAS🐱
 
<script setup lang="ts">
import { CfAvatar } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-row">
    <CfAvatar src="https://i.pravatar.cc/80?img=22" alt="正常加载" />
    <CfAvatar src="/__intentionally_404__.png" name="Fallback Test" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="anna lee smith" />
    <CfAvatar fallback="🐱" />
    <CfAvatar>
      <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
        <circle cx="8" cy="6" r="3" />
        <path d="M2 14a6 6 0 0 1 12 0" />
      </svg>
    </CfAvatar>
  </div>
</template>
<script setup>
import { CfAvatar } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-row">
    <CfAvatar src="https://i.pravatar.cc/80?img=22" alt="正常加载" />
    <CfAvatar src="/__intentionally_404__.png" name="Fallback Test" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="anna lee smith" />
    <CfAvatar fallback="🐱" />
    <CfAvatar>
      <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
        <circle cx="8" cy="6" r="3" />
        <path d="M2 14a6 6 0 0 1 12 0" />
      </svg>
    </CfAvatar>
  </div>
</template>
<CfAvatar src="https://i.pravatar.cc/80?img=22" alt="正常加载" />
<CfAvatar src="/__intentionally_404__.png" name="Fallback Test" />
<CfAvatar name="Chen Qi" />
<CfAvatar name="anna lee smith" />
<CfAvatar fallback="🐱" />
<CfAvatar><UserSvg /></CfAvatar>
<CfAvatar src="https://i.pravatar.cc/80?img=22" alt="正常加载" />
<CfAvatar src="/__intentionally_404__.png" name="Fallback Test" />
<CfAvatar name="Chen Qi" />
<CfAvatar name="anna lee smith" />
<CfAvatar fallback="🐱" />
<CfAvatar><UserSvg /></CfAvatar>

AvatarGroup 重叠

AvatarGroup 把若干 Avatar 横向重叠排列，常用于 “X 人协作” 的头像列表。spacing 控制重叠幅度（负值越大重叠越多）。

背景
+5ANBOCIDE+12
 
<script setup lang="ts">
import { CfAvatar, CfAvatarGroup } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAvatarGroup>
      <CfAvatar src="https://i.pravatar.cc/80?img=1" />
      <CfAvatar src="https://i.pravatar.cc/80?img=2" />
      <CfAvatar src="https://i.pravatar.cc/80?img=3" />
      <CfAvatar fallback="+5" />
    </CfAvatarGroup>
    <CfAvatarGroup :spacing="-4">
      <CfAvatar size="sm" name="Anna" />
      <CfAvatar size="sm" name="Bob" />
      <CfAvatar size="sm" name="Cici" />
      <CfAvatar size="sm" name="Dean" />
      <CfAvatar size="sm" fallback="+12" />
    </CfAvatarGroup>
  </div>
</template>
<script setup>
import { CfAvatar, CfAvatarGroup } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAvatarGroup>
      <CfAvatar src="https://i.pravatar.cc/80?img=1" />
      <CfAvatar src="https://i.pravatar.cc/80?img=2" />
      <CfAvatar src="https://i.pravatar.cc/80?img=3" />
      <CfAvatar fallback="+5" />
    </CfAvatarGroup>
    <CfAvatarGroup :spacing="-4">
      <CfAvatar size="sm" name="Anna" />
      <CfAvatar size="sm" name="Bob" />
      <CfAvatar size="sm" name="Cici" />
      <CfAvatar size="sm" name="Dean" />
      <CfAvatar size="sm" fallback="+12" />
    </CfAvatarGroup>
  </div>
</template>
<CfAvatarGroup>
<CfAvatar src="https://i.pravatar.cc/80?img=1" />
<CfAvatar src="https://i.pravatar.cc/80?img=2" />
<CfAvatar src="https://i.pravatar.cc/80?img=3" />
<CfAvatar fallback="+5" />
</CfAvatarGroup>

<CfAvatarGroup spacing={-4}>
<CfAvatar size="sm" name="Anna" />
<CfAvatar size="sm" name="Bob" />
<CfAvatar size="sm" name="Cici" />
<CfAvatar size="sm" fallback="+12" />
</CfAvatarGroup>
<CfAvatarGroup>
<CfAvatar src="https://i.pravatar.cc/80?img=1" />
<CfAvatar src="https://i.pravatar.cc/80?img=2" />
<CfAvatar src="https://i.pravatar.cc/80?img=3" />
<CfAvatar fallback="+5" />
</CfAvatarGroup>

<CfAvatarGroup spacing={-4}>
<CfAvatar size="sm" name="Anna" />
<CfAvatar size="sm" name="Bob" />
<CfAvatar size="sm" name="Cici" />
<CfAvatar size="sm" fallback="+12" />
</CfAvatarGroup>

API

Avatar

Prop类型默认值说明
srcstring—图片地址；加载失败自动回退
altstring—图片 alt；未传时回退到 name
namestring—用于生成首字母缩写（取首尾两个词的首字母）
fallbackstring—直接指定缩写文本，覆盖 name 计算结果
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'尺寸
shape'circle' | 'square''circle'形状

默认插槽（Vue）/ children（React）会替换缩写，常见用法是放一个 SVG 图标。

AvatarGroup

Prop类型默认值说明
spacingnumber-8子项之间的水平间距，负值产生重叠效果

反馈与讨论

Avatar 头像 的讨论

0
0 / 600
一键发送
正在加载评论...