NaEasy UI

Appearance

AvatarStack 头像组 ​

头像组组件用于显示一组头像，通常可用于显示活动用户、好友信息等等。

导入 ​

js
import AvatarStack from '@/components/display/AvatarStack.vue'

用法 ​

基础用法 ​

通过 urls 属性设置头像图片数组，round 属性设置圆形头像。

vue
<template>
  <AvatarStack :urls="[
    'https://imengyu.top/assets/images/test/2.jpg',
    'https://imengyu.top/assets/images/test/3.jpg',
    'https://imengyu.top/assets/images/test/4.jpg',
    'https://imengyu.top/assets/images/test/5.jpg',
  ]" round />
</template>

自定义大小 ​

通过 size 属性设置头像组的大小。

vue
<template>
  <AvatarStack :urls="[
    'https://imengyu.top/assets/images/test/2.jpg',
    'https://imengyu.top/assets/images/test/3.jpg',
    'https://imengyu.top/assets/images/test/4.jpg',
    'https://imengyu.top/assets/images/test/5.jpg',
  ]" round :size="100" />
</template>

方形形状 ​

通过 round=false 属性设置方形头像。

vue
<template>
  <AvatarStack :urls="[
    'https://imengyu.top/assets/images/test/2.jpg',
    'https://imengyu.top/assets/images/test/3.jpg',
    'https://imengyu.top/assets/images/test/4.jpg',
    'https://imengyu.top/assets/images/test/5.jpg',
  ]" :round="false" />
</template>

头像组超出后显示数字 ​

通过 maxCount 属性设置最大显示的头像数量，超出部分会显示数量。

vue
<template>
  <AvatarStack :urls="[
    'https://imengyu.top/assets/images/test/2.jpg',
    'https://imengyu.top/assets/images/test/3.jpg',
    'https://imengyu.top/assets/images/test/4.jpg',
    'https://imengyu.top/assets/images/test/5.jpg',
    'https://imengyu.top/assets/images/test/2.jpg',
    'https://imengyu.top/assets/images/test/3.jpg',
    'https://imengyu.top/assets/images/test/4.jpg',
    'https://imengyu.top/assets/images/test/5.jpg',
  ]" :maxCount="6" />
</template>

边框 ​

通过 border 和 borderWidth 属性设置头像边框。

vue
<template>
  <AvatarStack :urls="[
    'https://imengyu.top/assets/images/test/2.jpg',
    'https://imengyu.top/assets/images/test/3.jpg',
    'https://imengyu.top/assets/images/test/4.jpg',
    'https://imengyu.top/assets/images/test/5.jpg',
    'https://imengyu.top/assets/images/test/2.jpg',
    'https://imengyu.top/assets/images/test/3.jpg',
    'https://imengyu.top/assets/images/test/4.jpg',
    'https://imengyu.top/assets/images/test/5.jpg',
  ]" :maxCount="6" round :border="true" :borderWidth="10"  />
</template>

设置头像之间的间距 ​

通过 imageMargin 属性设置头像之间的间距。

vue
<template>
  <AvatarStack :urls="[
    'https://imengyu.top/assets/images/test/2.jpg',
    'https://imengyu.top/assets/images/test/3.jpg',
    'https://imengyu.top/assets/images/test/4.jpg',
    'https://imengyu.top/assets/images/test/5.jpg',
  ]" :round="false" :imageMargin="25" />
</template>

API 参考 ​

AvatarStack ​

头像组组件。

Props ​

名称说明类型必填默认值
defaultAvatar默认头像，在 url 为空或者加载失败时使用此头像string-''
urls头像的图标URL数组string[]是[]
maxCount最大显示多少个头像，超过后显示数字number-5
showOverflowCount超过最大显示后是否显示数字boolean-true
imageMargin设置头像之间的距离，默认是 size/3number-0
size头像的大小number-70
round头像是否是圆形的boolean-true
radius头像是圆角的大小，仅在 round=false 时有效number/string-'50%'
border是否为头像添加边框boolean-false
borderWidth头像边框宽度number-10
borderColor头像边框颜色string-'white'
overflowCountStyle超出显示文字背景样式object-{}
overflowCountTextStyle超出显示文字自定义样式object-{}
preview是否可以点击放大预览boolean-false

Events ​

名称说明参数
click点击头像事件index: number

主题变量 ​

名称类型默认值说明
AvatarStackSizenumber70头像默认大小
AvatarStackRoundbooleantrue头像默认是否为圆形
AvatarStackRadiusstring'50%'头像默认圆角值
AvatarStackMaxCountnumber5最大显示头像数量
AvatarStackShowOverflowCountbooleantrue超过最大显示后是否显示数字
AvatarStackBorderbooleanfalse是否显示头像边框
AvatarStackBorderWidthnumber10头像边框宽度
AvatarStackBorderColorstring'white'头像边框颜色
AvatarStackOverflowCountBackgroundColorstring'white'超出数量显示的背景色
AvatarStackOverflowCountTextFontSizenumber12超出数量显示的文字大小
AvatarStackOverflowCountTextColorstring'text.content'超出数量显示的文字颜色