ui-avatar+头像组件

版本：v2.3.11

头像组件用于显示用户头像，支持图片和文字两种形式，以及头像组功能。

基本使用

单个头像

<template>
  <div class="avatar-demo">
    <ui-avatar src="https://example.com/avatar.jpg" />
    <ui-avatar text="用户" />
  </div>
</template>

<style scoped>
.avatar-demo {
  display: flex;
  gap: 16px;
  padding: 20px;
}
</style>

头像组

<template>
  <div class="avatar-group-demo">
    <ui-avatar-group>
      <ui-avatar src="https://example.com/avatar1.jpg" />
      <ui-avatar src="https://example.com/avatar2.jpg" />
      <ui-avatar src="https://example.com/avatar3.jpg" />
    </ui-avatar-group>
  </div>
</template>

<style scoped>
.avatar-group-demo {
  padding: 20px;
}
</style>

单个头像 Props

参数	类型	默认值	说明
src	String	-	头像图片地址
text	String	-	头像文字，当没有图片时显示
size	Number	40	头像大小，单位：px
shape	String	'circle'	头像形状，可选值：circle、square
background	String	-	头像背景色，仅当显示文字时有效

单个头像 Events

事件名	说明	回调参数
click	点击头像时触发	-

单个头像 Slots

名称	说明
default	自定义头像内容

头像组 Props

参数	类型	默认值	说明
max	Number	-	最大显示头像数量，超出部分显示数量
spacing	Number	-8	头像之间的间距，单位：px
size	Number	40	头像大小，单位：px

头像组 Slots

名称	说明
default	头像列表
more	自定义超出部分的显示内容

示例

不同形状的头像

<template>
  <div class="avatar-shape-demo">
    <ui-avatar src="https://example.com/avatar.jpg" shape="circle" />
    <ui-avatar src="https://example.com/avatar.jpg" shape="square" />
  </div>
</template>

不同大小的头像

<template>
  <div class="avatar-size-demo">
    <ui-avatar text="小" size="30" />
    <ui-avatar text="中" size="40" />
    <ui-avatar text="大" size="60" />
  </div>
</template>

带数量限制的头像组

<template>
  <div class="avatar-group-max-demo">
    <ui-avatar-group :max="3">
      <ui-avatar src="https://example.com/avatar1.jpg" />
      <ui-avatar src="https://example.com/avatar2.jpg" />
      <ui-avatar src="https://example.com/avatar3.jpg" />
      <ui-avatar src="https://example.com/avatar4.jpg" />
      <ui-avatar src="https://example.com/avatar5.jpg" />
    </ui-avatar-group>
  </div>
</template>

自定义超出部分的头像组

<template>
  <div class="avatar-group-more-demo">
    <ui-avatar-group :max="2">
      <ui-avatar src="https://example.com/avatar1.jpg" />
      <ui-avatar src="https://example.com/avatar2.jpg" />
      <ui-avatar src="https://example.com/avatar3.jpg" />
      <template #more>
        <ui-avatar text="+2" background="#ccc" />
      </template>
    </ui-avatar-group>
  </div>
</template>

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/#/pages/base/avatar/avatar