Tui Plus Vapor

Appearance

# t-avatar-group

AvatarGroup 头像组

t-avatar-group 组件介绍 ​

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

t-avatar-group 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-avatar-group 基础用法 ​

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

vue
<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mlrt-15"
				title="Avatar 头像"
				sub-title="背景随机色文字头像,头像组,丰富主题样式"></t-card>
		<introduction title="头像形状">
			<view class="fl plr-15 faic">
				<t-avatar size="mini"
						  class="mr-15 r-100!"
						  :src="src"></t-avatar>
				<t-avatar size="small"
						  class="mr-15 r-100!"
						  :src="src"></t-avatar>
				<t-avatar size="medium"
						  class="mr-15 r-100!"
						  :src="src"></t-avatar>
				<t-avatar size="large"
						  class="mr-15 r-100!"
						  :src="src"></t-avatar>
			</view>
		</introduction>
		<introduction title="头像主题尺寸">
			<view class="fl plr-15 faic">
				<t-avatar size="mini"
						  class="mr-15"
						  :src="src"></t-avatar>
				<t-avatar size="small"
						  class="mr-15"
						  :src="src"></t-avatar>
				<t-avatar size="medium"
						  class="mr-15"
						  :src="src"></t-avatar>
				<t-avatar size="large"
						  class="mr-15"
						  :src="src"></t-avatar>
			</view>
		</introduction>
		<introduction title="图标头像">
			<view class="fl plr-15 faic">
				<t-avatar icon="starfill"
						  size="mini"
						  class="mr-15 r-100!"></t-avatar>
				<t-avatar icon="starfill"
						  size="small"
						  class="mr-15 r-100!"></t-avatar>
				<t-avatar icon="starfill"
						  size="medium"
						  class="mr-15 r-100!"></t-avatar>
				<t-avatar icon="starfill"
						  size="large"
						  class="mr-15 r-100!"></t-avatar>
			</view>
		</introduction>
		<introduction title="图标头像">
			<view class="fl plr-15 faic">
				<t-avatar icon="setting"
						  size="mini"
						  class="mr-15"></t-avatar>
				<t-avatar icon="starfill"
						  size="small"
						  class="mr-15"></t-avatar>
				<t-avatar icon="starfill"
						  size="medium"
						  class="mr-15"></t-avatar>
				<t-avatar icon="setting"
						  size="large"
						  class="mr-15"></t-avatar>
			</view>
		</introduction>
		<introduction title="文字头像">
			<view class="fl plr-15 faic">
				<t-avatar size="mini"
						  text="周"
						  class="mr-15"></t-avatar>
				<t-avatar size="small"
						  text="吴"
						  class="mr-15"></t-avatar>
				<t-avatar size="medium"
						  text="郑"
						  class="mr-15"></t-avatar>
				<t-avatar size="large"
						  text="王"
						  class="mr-15"></t-avatar>
			</view>
		</introduction>
		<introduction title="文字头像">
			<view class="fl plr-15 faic">
				<t-avatar size="mini"
						  text="周"
						  class="mrb-15 r-100!"></t-avatar>
				<t-avatar size="small"
						  text="吴"
						  class="mrb-15 r-100!"></t-avatar>
				<t-avatar size="medium"
						  text="郑"
						  class="mrb-15 r-100!"></t-avatar>
				<t-avatar size="large"
						  text="王"
						  class="mrb-15 r-100!"></t-avatar>
			</view>
		</introduction>
		<introduction title="堆叠">
			<t-avatar-group :maxCount="7"
							:list="urls">
				<template #default="{item,index}">
					<t-avatar :class="[(index as number)>0?'ml-n18':'','twhr-35!']"
							  :src="`${item}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twhr-35 bg-#f5f5f5 fc ml-n18">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
			<t-avatar-group :maxCount="7"
							:list="urls"
							class="mt-25">
				<template #default="{item,index}">
					<t-avatar :class="[(index as number)>0?'ml-n18':'','twhr-35!']"
							  :src="`${item}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twhr-35 fc ml-n35">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
		</introduction>
		<introduction title="平铺"
					  class="mt-15">
			<t-avatar-group :maxCount="5"
							:list="urls">
				<template #default="{item,index}">
					<t-avatar :class="['twhr-35! mr-10']"
							  :src="`${item}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twhr-35 bg-#f5f5f5 fc">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
			<t-avatar-group :maxCount="5"
							:list="urls"
							class="mt-25">
				<template #default="{item,index}">
					<t-avatar :class="['twh-35! mr-10','r-10!']"
							  :src="`${item}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twh-35 r-10 fc mr-10 bg-#f5f5f5">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
		</introduction>
		<introduction title="混合使用"
					  class="mt-30">
			<t-avatar-group :maxCount="5"
							:list="urls1">
				<template #default="{item,index}">
					<t-avatar class="mr-n30 r-100!"
							  v-if="`${(item as UTSJSONObject)['type']}`=='text'"
							  :text="`${(item as UTSJSONObject)['value']}`"></t-avatar>
					<t-avatar class="mr-n30 r-100!"
							  v-if="`${(item as UTSJSONObject)['type']}`=='icon'"
							  :icon="`${(item as UTSJSONObject)['value']}`"></t-avatar>
					<t-avatar class="mr-n30 r-100!"
							  v-if="`${(item as UTSJSONObject)['type']}`=='image'"
							  :src="`${(item as UTSJSONObject)['value']}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twhr-40 bg-#f5f5f5 fc r-100">
						<text class="c-red s-15 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-40 r-10 fc bg-#f5f5f5">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
		</introduction>
	</view>
</template>
<script setup>
	const src = ref<string>('/static/image/avatar.jpeg')
	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: '王' },
		{ type: 'icon', value: 'rmb-circle' },
		{ type: 'text', value: '李' },
		{ type: 'image', value: '/static/image/avatar/4.jpg' },
	])
	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',
		'/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'
	])
</script>

t-avatar-group Props ​

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

t-avatar-group Events ​

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

t-avatar-group Slots ​

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