Avatar 头像

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

设计师专属

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

示例

基础使用：

<template>
  <template v-for="size in sizes" :key="size">
    <f-space>
      {{ size }}
      <f-avatar :src="curAvatar()" :size="size"></f-avatar>
      <f-avatar :size="size">
        <template #icon><UserOutlined /></template>
      </f-avatar>
      <f-avatar :size="size">U</f-avatar>
      <f-avatar :size="size" style="background-color: #378eef">U</f-avatar>
      <f-avatar :src="curAvatar()" shape="square" :size="size"></f-avatar>
      <f-badge dot>
        <f-avatar :src="curAvatar()" shape="square" :size="size"></f-avatar>
      </f-badge>
    </f-space>
    <br />
    <br />
  </template>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'

const count = 30
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=picture&noinfo`

const avatars = ref<string[]>([])
const curAvatar = () => avatars.value[Math.floor((Math.random() * 10) % avatars.value.length)]

const sizes = ['large', 'default', 'small', 'mini']

onMounted(() => {
  fetch(fakeDataUrl)
    .then(res => res.json())
    .then((res: { results: Array<{ picture: { medium: string } }> }) => {
      avatars.value = res.results.map(v => v.picture.medium)
    })
})
</script>

API

Avatar

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

注意

• size 扩展mini

Avatar.Group (2.2.0)

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