tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
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 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>

</template>

<script setup>
	const list = [
		"https://picsum.photos/id/64/100/100",
		"https://picsum.photos/id/65/100/100",
		"https://picsum.photos/id/77/100/100",
		"https://picsum.photos/id/91/100/100",
		"https://picsum.photos/id/103/100/100",
		"https://picsum.photos/id/119/100/100",
		"https://picsum.photos/id/129/100/100",
		"https://picsum.photos/id/137/100/100",
		"https://picsum.photos/id/142/100/100",
		"https://picsum.photos/id/177/100/100",
	] as string[]
	const list2 = [
		"同名自定义",
		"Dclound",
		"ak",
		"sk",
		"国家",
		"天清色",
		"漂亮",
		"相爱一家人",
		"北京",
		"厉害了我的哥",
		"呃",
	] as string[]
	const list3 = [
		"同名自定义",
		"https://picsum.photos/id/77/100/100",
		"",
		"sk",
		"https://picsum.photos/id/119/100/100",
		"",
		"漂亮",
		"https://picsum.photos/id/129/100/100",
		"北京",
		"https://picsum.photos/id/91/100/100",
		"呃",
	] as string[]
</script>

<style>

</style>
最近更新