Avatar 头像

用来代表用户或事物，支持图片、图标或字符展示。

设计师专属

安装 Kitchen Sketch 插件 💎，一键填充高逼格头像和文本。

代码演示


基本

头像有三种尺寸，两种形状可选。

<template>
  <a-avatar :size="64">
    <template #icon><UserOutlined /></template>
  </a-avatar>
  <a-avatar size="large">
    <template #icon><UserOutlined /></template>
  </a-avatar>
  <a-avatar>
    <template #icon><UserOutlined /></template>
  </a-avatar>
  <a-avatar size="small">
    <template #icon><UserOutlined /></template>
  </a-avatar>
  <br />
  <a-avatar shape="square" :size="64">
    <template #icon><UserOutlined /></template>
  </a-avatar>
  <a-avatar shape="square" size="large">
    <template #icon><UserOutlined /></template>
  </a-avatar>
  <a-avatar shape="square">
    <template #icon><UserOutlined /></template>
  </a-avatar>
  <a-avatar shape="square" size="small">
    <template #icon><UserOutlined /></template>
  </a-avatar>
</template>
<script lang="ts">
import { UserOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    UserOutlined,
  },
});
</script>
U
自动调整字符大小

对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。

<template>
  <a-avatar
    shape="square"
    size="large"
    :style="{ backgroundColor: color, verticalAlign: 'middle' }"
  >
    {{ avatarValue }}
  </a-avatar>
  <a-button
    size="small"
    :style="{ marginLeft: '16px', verticalAlign: 'middle' }"
    @click="changeValue"
  >
    改变
  </a-button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; 
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
export default defineComponent({
  setup() {
    const avatarValue = ref(UserList[0]);
    const color = ref(colorList[0]);
    const changeValue = () => {
      const index = UserList.indexOf(avatarValue.value);
      avatarValue.value = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
      color.value = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];
    };
    return {
      avatarValue,
      color,
      changeValue,
    };
  },
});
</script>
K
K +2
K +2
Avatar.Group

头像组合展现。

<template>
  <a-avatar-group>
    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
    <a-avatar style="background-color: #f56a00">K</a-avatar>
    <a-tooltip title="Ant User" placement="top">
      <a-avatar style="background-color: #87d068">
        <template #icon><UserOutlined /></template>
      </a-avatar>
    </a-tooltip>
    <a-avatar style="background-color: #1890ff">
      <template #icon><UserOutlined /></template>
    </a-avatar>
  </a-avatar-group>
  <a-divider />
  <a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
    <a-avatar style="background-color: #1890ff">K</a-avatar>
    <a-tooltip title="Ant User" placement="top">
      <a-avatar style="background-color: #87d068">
        <template #icon><UserOutlined /></template>
      </a-avatar>
    </a-tooltip>
    <a-avatar style="background-color: #1890ff">
      <template #icon><UserOutlined /></template>
    </a-avatar>
  </a-avatar-group>
  <a-divider />
  <a-avatar-group
    :max-count="2"
    size="large"
    :max-style="{
      color: '#f56a00',
      backgroundColor: '#fde3cf',
    }"
  >
    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
    <a-avatar style="background-color: #1890ff">K</a-avatar>
    <a-tooltip title="Ant User" placement="top">
      <a-avatar style="background-color: #87d068">
        <template #icon><UserOutlined /></template>
      </a-avatar>
    </a-tooltip>
    <a-avatar style="background-color: #1890ff">
      <template #icon><UserOutlined /></template>
    </a-avatar>
  </a-avatar-group>
</template>
<script lang="ts">
import { UserOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    UserOutlined,
  },
});
</script>
UUSER U
类型

支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。

<template>
  <a-avatar>
    <template #icon>
      <UserOutlined />
    </template>
  </a-avatar>
  <a-avatar>U</a-avatar>
  <a-avatar>USER</a-avatar>
  <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  <a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar>
  <a-avatar style="background-color: #87d068">
    <template #icon>
      <UserOutlined />
    </template>
  </a-avatar>
</template>
<script lang="ts">
import { UserOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    UserOutlined,
  },
});
</script>

1
带徽标的头像

通常用于消息提示。

<template>
  <span style="margin-right: 24px">
    <a-badge :count="1">
      <a-avatar shape="square">
        <template #icon><UserOutlined /></template>
      </a-avatar>
    </a-badge>
  </span>
  <span>
    <a-badge dot>
      <a-avatar shape="square">
        <template #icon><UserOutlined /></template>
      </a-avatar>
    </a-badge>
  </span>
</template>
<script lang="ts">
import { UserOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    UserOutlined,
  },
});
</script>
<style>
#components-avatar-demo-badge .ant-avatar {
  margin-top: 0;
  margin-right: 0;
}
</style>
响应式尺寸

头像大小可以根据屏幕大小自动调整。

<template>
  <a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
    <template #icon>
      <AntDesignOutlined />
    </template>
  </a-avatar>
</template>
<script lang="ts">
import { AntDesignOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    AntDesignOutlined,
  },
});
</script>

API#

Avatar

参数 说明 类型 默认值 版本
icon 设置头像的图标类型，可设为 Icon 的 type 或 VNode VNode | slot -
shape 指定头像的形状 circle | square circle
size 设置头像的大小 number | large | small | default | { xs: number, sm: number, ...} default 2.2.0
src 图片类头像的资源地址 string -
srcset 设置图片类头像响应式资源地址 string -
alt 图像无法显示时的替代文本 string -
gap 字符类型距离左右两侧边界单位像素 number 4 2.2.0
draggable 图片是否允许拖动 boolean | 'true' | 'false' - 2.2.0
loadError 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 () => boolean -

Avatar.Group (2.2.0)

参数 说明 类型 默认值 版本
maxCount 显示的最大头像个数 number -
maxPopoverPlacement 多余头像气泡弹出位置 top | bottom top
maxStyle 多余头像样式 CSSProperties -
size 设置头像的大小 number | large | small | default | { xs: number, sm: number, ...} default