t-avatar-group

AvatarGroup 头像组

组件介绍

t-avatar-group 是一个头像组组件，用于展示多个头像的组合，支持设置最大显示数量，当头像数量超过限制时会显示剩余数量。组件提供了灵活的插槽机制，允许自定义每个头像的显示方式和超出部分的显示内容，适合需要展示团队成员、用户列表等场景。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/avatar/avatar.uvue，通过 list 属性设置头像数据，通过 maxCount 属性设置最大显示数量。

<template>
  <!-- 堆叠效果 -->
  <t-avatar-group :maxCount="7" :list="urls">
    <template #default="{item,index}">
      <t-avatar :class="[(index as number)>0?'ml-n35':'','twhr-70!']" :src="`${item}`"></t-avatar>
    </template>
    <template #more="{count}">
      <view class="twhr-70 bg-#f5f5f5 fc ml-n35">
        <text class="c-red s-30 sfwb">+{{count}}</text>
      </view>
    </template>
  </t-avatar-group>

  <!-- 平铺效果 -->
  <t-avatar-group :maxCount="5" :list="urls" class="mt-50">
    <template #default="{item,index}">
      <t-avatar :class="['twhr-70! mr-20']" :src="`${item}`"></t-avatar>
    </template>
    <template #more="{count}">
      <view class="twhr-70 bg-#f5f5f5 fc">
        <text class="c-red s-30 sfwb">+{{count}}</text>
      </view>
    </template>
  </t-avatar-group>

  <!-- 混合类型 -->
  <t-avatar-group :maxCount="5" :list="urls1" class="mt-50">
    <template #default="{item,index}">
      <t-avatar class="mr-20" v-if="`${(item as UTSJSONObject)['type']}`=='text'" :text="`${(item as UTSJSONObject)['value']}`"></t-avatar>
      <t-avatar class="mr-20" v-if="`${(item as UTSJSONObject)['type']}`=='icon'" :icon="`${(item as UTSJSONObject)['value']}`"></t-avatar>
      <t-avatar class="mr-20" v-if="`${(item as UTSJSONObject)['type']}`=='image'" :src="`${(item as UTSJSONObject)['value']}`"></t-avatar>
    </template>
    <template #more="{count}">
      <view class="twh-70 r-20 fc bg-#f5f5f5">
        <text class="c-red s-30 sfwb">+{{count}}</text>
      </view>
    </template>
  </t-avatar-group>
</template>

<script setup>
const urls = ref<string[]>([
  '/static/image/avatar/1.jpg',
  '/static/image/avatar/2.jpg',
  '/static/image/avatar/3.jpg',
  '/static/image/avatar/4.jpg',
  '/static/image/avatar/5.jpg',
  '/static/image/avatar/6.jpg'
])

const urls1 = ref<UTSJSONObject[]>([
  { type: 'text', value: '张' },
  { type: 'icon', value: 'account-fill' },
  { type: 'image', value: '/static/image/avatar/1.jpg' },
  { type: 'text', value: '周' },
  { type: 'text', value: '王' }
])
</script>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	''
maxCount	最大显示数量	number	5
list	头像列表的配置	any[]	[]

Events

事件名	说明	回调参数
click	点击时触发	UniPointerEvent
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

Slots

插槽名	说明
default	默认插槽，用于渲染每个头像，提供 item 和 index 两个参数
more	超出部分的插槽，提供 count 参数表示剩余数量