Avatar 头像

用作头像显示，可以为图片、图标或字符形式展示。

基础用法

头像的基础使用。如果头像是文字的话，会自动调节字体大小，来适应头像框。

TuView

大小和形状

通过设置 size 字段，可以调节头像的大小，默认大小为 40px。设置 shape 字段，可以设置头像是圆形 (circle) 还是正方形 (square)。

头像组

使用 tu-avatar-group 可以使用头像组功能，可通过 size 指定头像的大小。

View

2..

交互按钮

可以通过 trigger-icon、 trigger-type 来定制交互按钮，类型有遮罩（mask）和按钮（button）两种。

<template>
  <tu-space size="large">
    <tu-avatar
      :trigger-icon-style="{ color: '#5e7ce0' }"
      :auto-fix-font-size="false"
      @click="toast"
    >
      A
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar :trigger-icon-style="{ color: '#5e7ce0' }" @click="toast">
      <tu-icon size="20">
        <UserFilled />
      </tu-icon>
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar
      shape="square"
      :trigger-icon-style="{ color: '#5e7ce0' }"
      @click="toast"
    >
      <tu-icon size="20">
        <UserFilled />
      </tu-icon>
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar trigger-type="mask">
      <img
        alt="avatar"
        src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
      />
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>
  </tu-space>
</template>

<script lang="ts" setup>
import { UserFilled, Edit } from '@tu-view-plus/icons-vue';
import { TuMessage } from 'tu-view-plus';

const toast = () => {
  TuMessage('修改头像');
};
</script>

<template>
  <tu-space size="large">
    <tu-avatar
      :trigger-icon-style="{ color: '#5e7ce0' }"
      :auto-fix-font-size="false"
      @click="toast"
    >
      A
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar :trigger-icon-style="{ color: '#5e7ce0' }" @click="toast">
      <tu-icon size="20">
        <UserFilled />
      </tu-icon>
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar
      shape="square"
      :trigger-icon-style="{ color: '#5e7ce0' }"
      @click="toast"
    >
      <tu-icon size="20">
        <UserFilled />
      </tu-icon>
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar trigger-type="mask">
      <img
        alt="avatar"
        src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
      />
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>
  </tu-space>
</template>

<script lang="ts" setup>
import { UserFilled, Edit } from '@tu-view-plus/icons-vue';
import { TuMessage } from 'tu-view-plus';

const toast = () => {
  TuMessage('修改头像');
};
</script>

自动调整字体大小

如果头像是文字的话，会自动调节字体大小，来适应头像框。

自定义头像路径

自定义头像图片路径

加载失败:

主题

Avatar 组件提供了五个不同的主题：outset、inset、bordered、outlined 和 flat。通过设置 effect 属性来改变主题，默认为 outset。

Avatar API

Avatar Attributes

参数名	描述	类型	默认值
shape	头像的形状，有圆形(circle)和正方形(square)两种	`String`	circle
imageUrl	自定义头像图片地址，如果传入该属性，会默认渲染 img 标签	`String`	-
size	头像的尺寸大小，单位是 px。未填写时使用样式中的大小 40px	`Number`	-
auto-fix-font-size	是否自动根据头像尺寸调整字体大小	`Boolean`	true
triggerType	可点击的头像交互类型。	`String`	mask
trigger-icon-style	交互图标的样式	`CSSProperties`	-
effect	主题	`String`	outset

Avatar Event

事件名	描述	参数
click	点击回调	`Function`
error	图片加载错误	-
load	图片加载成功	-

Avatar Slots

参数名	描述
trigger-icon	可点击的头像交互图标

AvatarGroup API

AvatarGroup Attributes

参数名	描述	类型	默认值
shape	头像的形状，有圆形(circle)和正方形(square)两种	`String`	circle
size	头像的尺寸大小，单位是 px。未填写时使用样式中的大小 40px	`Number`	-
auto-fix-font-size	是否自动根据头像尺寸调整字体大小	`Boolean`	true
max-count	头像组最多显示的头像数量，多余头像将以 +x 的形式展示。	`Number`	0
z-index-ascend	头像组内的头像 z-index 递增，默认是递减。	`Boolean`	false
max-style	多余头像样式。	`CSSProperties`	-

Avatar 头像 ​

基础用法 ​

大小和形状 ​

头像组 ​

交互按钮 ​

自动调整字体大小 ​

自定义头像路径 ​

主题 ​

Avatar API ​

Avatar Attributes ​

Avatar Event ​

Avatar Slots ​

AvatarGroup API ​

AvatarGroup Attributes ​