头像 Avatar

用于展示用户或事物的头像，支持图片、文字、图标，多种尺寸和形状。

尺寸与图标

通过 size 属性设置头像尺寸，支持 mini、small、default、large，默认插槽放置图标或文字。

<template>
  <bp-space>
    <bp-avatar v-for="size in sizeList" :size>
      <IconUser3Line />
    </bp-avatar>
  </bp-space>
</template>

<script setup lang="ts">
const sizeList = ["mini", "small", "default", "large"];
</script>

文字头像

使用文字作为头像内容，组件会自动缩放字体以适配容器。

A

B

C

D

<template>
  <bp-space>
    <bp-avatar size="mini" shape="circle">A</bp-avatar>
    <bp-avatar size="small" shape="circle">B</bp-avatar>
    <bp-avatar shape="circle">C</bp-avatar>
    <bp-avatar size="large" shape="circle">D</bp-avatar>
  </bp-space>
</template>

形状

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

圆

方

<template>
  <bp-space>
    <bp-avatar shape="circle">圆</bp-avatar>
    <bp-avatar shape="square">方</bp-avatar>
  </bp-space>
</template>

图片头像

通过 image-url 属性设置图片地址，object-fit 控制图片填充方式。

<template>
  <bp-space>
    <bp-avatar image-url="https://picsum.photos/200" size="mini" />
    <bp-avatar image-url="https://picsum.photos/200" size="small" />
    <bp-avatar image-url="https://picsum.photos/200" />
    <bp-avatar image-url="https://picsum.photos/200" size="large" />
  </bp-space>
</template>

自定义尺寸

size 支持传入数字（像素值）自定义尺寸。

40

60

80

<template>
  <bp-space>
    <bp-avatar :size="40">40</bp-avatar>
    <bp-avatar :size="60">60</bp-avatar>
    <bp-avatar :size="80">80</bp-avatar>
  </bp-space>
</template>

Avatar 属性

shape	头像形状	String	circle	-
image-url	图片地址	String	-	-
object-fit	图片填充方式	String	cover	-
size	头像尺寸	StringNumber	default	-

Avatar 插槽

default	文字/图标内容	-	-
loading	图片加载中内容	-	-
error	图片加载失败内容	-	-