TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
590
2.5m

头像组 xAvatarGroup ​

在线预览
在线模拟尺寸:

介绍 ​

平铺和堆叠方式。如果想要单头像建议使用：xSheet+xImage配合，+xBadge达到效果，因此我不再提供单头像组件，没有意义。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-avatar-group/x-avatar-group.uvue

使用 ​

ts

<x-avatar-group></x-avatar-group>

Props 属性 ​

名称说明类型默认值
list头像列表,也可以是文本数组，也可以是空字符串数组
string[]() : string[] => [] as string[]
size不允许使用auto,%只能数字或者带单位的数字2px,2rpx这种
string'32'
maxCount最多显示几个头像。
number5
round圆角
string'16'
gutter平铺或者堆叠时的间隙或者前推差值。
不允许使用auto,%只能数字或者带单位的数字2px,2rpx这种
string'16'
model显示类型见：
https://doc.dcloud.net.cn/uni-app-x/component/image.html#%E5%B1%9E%E6%80%A7
string"scaleToFill"
count显示在最后一个时，显示的数字。如果为0取list的长度
number0
showCount是否显示最后一个数字头像
booleantrue
flat是否平铺，如果否就是堆叠。是就是正常排列。
booleanfalse
bgColor如果为文本头像时的背景
string"#f5f5f5"
darkBgColor如果为文本头像时的暗黑背景
空时默认取inputDarkBgcolor
string""
fontColor如果为文本头像时的文字颜色
string"#a6a6a6"
darkFontColor如果为文本头像时的暗黑背景
空时默认取inputDarkBgcolor
string"#ffffff"
fontSize字号
string"14"
randomBgColor文本头像时，是否随机背景色
booleanfalse
placeIcon如果当图片或者文本为空时的图片占位符
可以是图片地址或者图标名称
string'user-3-fill'

Events 事件 ​

名称参数说明
clickindex: numbersrc: string头像被点击时
moreClick-最后一个数字头像more被点击时

Slots 插槽 ​

名称说明数据
moremore更多插槽，如果使用了这个插槽moreClick事件会丢失，请自己写在自己的布局上。-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/avatar-group

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">头像组 xAvatarGroup</x-text>
			<x-text color="#999999">
				平铺和堆叠方式。如果想要单头像建议使用：xSheet+xImage配合，+xBadge达到效果，因此我不再提供单头像组件，没有意义。
			</x-text>
		</x-sheet>
		<x-sheet >
			<x-text font-size="18" class=" text-weight-b mb-8">堆叠</x-text>
			<x-avatar-group :list="list" :max-count="8"></x-avatar-group>
		</x-sheet>
		<x-sheet >
			<x-text font-size="18" class=" text-weight-b mb-8">平铺</x-text>
			<x-avatar-group :list="list" :flat="true" :max-count="8" gutter="3"></x-avatar-group>
		</x-sheet>
		<x-sheet >
			<x-text font-size="18" class=" text-weight-b mb-8">控制圆角及显示数量</x-text>
			<x-avatar-group :list="list" round="4" :flat="true" :max-count="8" :count="1000" gutter="3"></x-avatar-group>
		</x-sheet>
		<x-sheet >
			<x-text font-size="18" class=" text-weight-b mb-8">文本头像</x-text>
			<x-avatar-group :list="list2" round="4" :flat="true" :max-count="8" :count="1000" gutter="3"></x-avatar-group>
		</x-sheet>
		<x-sheet >
			<x-text font-size="18" class=" text-weight-b mb-8">文本头像随机颜色</x-text>
			<x-avatar-group :randomBgColor="true" :list="list2" round="4" :flat="true" :max-count="8" :count="1000" gutter="3"></x-avatar-group>
		</x-sheet>
		<x-sheet >
			<x-text font-size="18" class=" text-weight-b mb-8">头像与文本混搭,空时图标占位</x-text>
			<x-avatar-group :randomBgColor="true" :list="list3" round="4" :flat="true" :max-count="8" :count="1000" gutter="3"></x-avatar-group>
		</x-sheet>
		<x-sheet >
			<x-text font-size="18" class=" text-weight-b mb-8">插槽定制more</x-text>
			<x-avatar-group :list="list" round="4" :flat="true" :max-count="4" :count="1000" gutter="3">
				<template v-slot:more>
					<x-sheet class="flex flex-center" width="32" height="32" :round="['4']" :margin="['0']" :padding="['0']" color="primary">
						<x-icon color="white" name="add-line"></x-icon>
					</x-sheet>
				</template>
			</x-avatar-group>
		</x-sheet>
		<view style="height: 32px;"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
		const list = [
			"https://store.tmui.design/api/randomImg?random=183",
			"https://store.tmui.design/api/randomImg?random=13",
			"https://store.tmui.design/api/randomImg?random=8",
			"https://store.tmui.design/api/randomImg?random=83",
			"https://store.tmui.design/api/randomImg?random=18",
			"https://store.tmui.design/api/randomImg?random=3",
			"https://store.tmui.design/api/randomImg?random=8",
			"https://store.tmui.design/api/randomImg?random=83",
			"https://store.tmui.design/api/randomImg?random=18",
			"https://store.tmui.design/api/randomImg?random=3",
		] as string[]
		const list2 = [
			"同名自定义",
			"Dclound",
			"ak",
			"sk",
			"国家",
			"天清色",
			"漂亮",
			"相爱一家人",
			"北京",
			"厉害了我的哥",
			"呃",
		] as string[]
		const list3 = [
			"同名自定义",
			"https://store.tmui.design/api/randomImg?random=8",
			"",
			"sk",
			"https://store.tmui.design/api/randomImg?random=3",
			"",
			"漂亮",
			"https://store.tmui.design/api/randomImg?random=3",
			"北京",
			"https://store.tmui.design/api/randomImg?random=83",
			"呃",
		] as string[]
</script>

<style>
		
</style>
最近更新