Avatar 头像

头像组件用于通过显示图像、首字母或图标来表示用户。

基本用法

头像样式可以通过 size、shape、backgroundColor、borderRadius、fallbackText 和 icon 属性来定义。

尺寸

头像有7种预设尺寸：xs、sm、md、lg、xl、2xl、3xl。默认尺寸为md。

3xl

2xl

xl

lg

md

sm

xs

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex gap-5">
    <div v-for="size in ['3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs']" :key="size">
      <p class="text-center text-lg font-500">
        {{ size }}
      </p>
      <ol-avatar :size="size" src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg" />
    </div>
  </div>
</template>

形状

头像有两种类型：circle和square。默认类型为circle。

circle

square

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex gap-4 items-center">
    <div v-for="shape in ['circle', 'square']" :key="shape">
      <p>{{ shape }}</p>
      <ol-avatar src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg" :shape />
    </div>
  </div>
</template>

背景颜色

backgroundColor属性允许您设置头像的背景颜色。

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex gap-4 items-center">
    <ol-avatar icon="i-mi-user" />
    <ol-avatar icon="i-mi-user" background-color="#ef4444" />
    <ol-avatar icon="i-mi-user" background-color="#f59e0b" />
    <ol-avatar icon="i-mi-user" background-color="#84cc16" />
    <ol-avatar icon="i-mi-user" background-color="#06b6d4" />
  </div>
</template>

边框半径

borderRadius属性允许您设置头像的边框半径。

5 px

15 px

25 px

35 px

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex gap-4 items-center">
    <div class="flex flex-col gap-2">
      <p>5 px</p>
      <ol-avatar src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg" border-radius="5" />
    </div>
    <div class="flex flex-col gap-2">
      <p>15 px</p>
      <ol-avatar src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg" border-radius="15" />
    </div>
    <div class="flex flex-col gap-2">
      <p>25 px</p>
      <ol-avatar src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg" border-radius="25" />
    </div>
    <div class="flex flex-col gap-2">
      <p>35 px</p>
      <ol-avatar src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg" border-radius="35" />
    </div>
  </div>
</template>

回退文本

fallbackText属性允许您在图像加载失败时显示回退文本。

BL

BLY

User

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex gap-4 items-center">
    <!-- Image error will show initials -->
    <ol-avatar
      src="/invalid-image.jpg"
      initials="Buzz Lightyear"
      background-color="#0ea5e9"
    />

    <ol-avatar
      src="/invalid-image.jpg"
      initials="Buzz-Light_Year"
      background-color="#0ea5e9"
    />

    <!-- Image error will show icon -->
    <ol-avatar
      src="/invalid-image.jpg"
      icon="i-mi-user"
      background-color="#10b981"
    />

    <!-- Image error will show text -->
    <ol-avatar
      src="/invalid-image.jpg"
      fallback-text="User"
      background-color="#f59e0b"
    />
  </div>
</template>

图标

icon属性允许您显示图标而不是图像。

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex gap-4 items-center">
    <ol-avatar icon="i-mi-user" />
  </div>
</template>

轮廓

outlined属性允许您显示轮廓头像。

在 github 中打开

展开代码

复制代码

<template>
  <div class="demo-avatar-outline">
    <ol-avatar
      src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg"
      size="2xl"
      outlined
    />
    <ol-avatar
      src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg"
      size="2xl"
      outlined
      outline-color="#ef4444"
    />
    <ol-avatar
      src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg"
      size="2xl"
      outlined
      outline-style="gradient"
    />
    <ol-avatar
      src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg"
      size="2xl"
      outlined
      outline-width="6"
      outline-style="gradient"
      outline-gradient="linear-gradient(45deg, #f97316, #ec4899)"
    />
    <ol-avatar
      src="https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg"
      size="2xl"
      outlined
      outline-width="5"
      outline-color="rgba(80, 200, 50, 0.9)"
    />
  </div>
</template>

  <style scoped>
  .demo-avatar-outline {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  </style>

属性

属性	描述	类型	默认值
src	图像URL	string	-
alt	图像的替代文本	string	-
initials	没有图像时显示的首字母	string	-
icon	要显示的图标名称	string	-
fallbackContent	回退内容	string	-
size	头像尺寸	string | number	md
shape	头像形状	string	circle
backgroundColor	背景颜色	string	#101
borderRadius	自定义边框半径	string / number	-
outlined	头像是否有轮廓	boolean	false
outlineColor	轮廓颜色	string	#ccc
outlineWidth	轮廓宽度	number	3
outlineStyle	轮廓样式	string	solid
outlineGradient	轮廓渐变	string	linear-gradient(45deg, #3b82f6, #8b5cf6)
clickable	头像是否可交互	boolean	false
ariaLabel	辅助功能的ARIA标签	string	-

事件

名称	描述	参数
click	点击时触发（仅当clickable为true时）	(event: MouseEvent)
error	图像加载失败时触发	-