展示组件
头像组 TmAvatarGroup
平铺和堆叠方式。
🌶️ 示例
查看模拟效果＋
示例模板
vue
<template>
<view>
<tm-sheet>
<tm-text font-size="36" class=" text-weight-b mb-8">头像组 tmAvatarGroup</tm-text>
<tm-text color="#999999">
平铺和堆叠方式。如果想要单头像建议使用：tmSheet+tmImage配合，+tmBadge达到效果，因此我不再提供单头像组件，没有意义。
</tm-text>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class=" text-weight-b mb-8">堆叠</tm-text>
<tm-avatar-group :list="list" :max-count="8"></tm-avatar-group>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class=" text-weight-b mb-8">平铺</tm-text>
<tm-avatar-group :list="list" :flat="true" :max-count="8" gutter="3"></tm-avatar-group>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class=" text-weight-b mb-8">控制圆角及显示数量</tm-text>
<tm-avatar-group :list="list" round="8" :flat="true" :max-count="8" :count="1000"
gutter="3"></tm-avatar-group>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class=" text-weight-b mb-8">文本头像</tm-text>
<tm-avatar-group :list="list2" round="8" :flat="true" :max-count="8" :count="1000"
gutter="3"></tm-avatar-group>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class=" text-weight-b mb-8">文本头像随机颜色</tm-text>
<tm-avatar-group :randomBgColor="true" :list="list2" round="8" :flat="true" :max-count="8" :count="1000"
gutter="3"></tm-avatar-group>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class=" text-weight-b mb-8">头像与文本混搭,空时图标占位</tm-text>
<tm-avatar-group :randomBgColor="true" :list="list3" round="8" :flat="true" :max-count="8" :count="1000"
gutter="3"></tm-avatar-group>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class=" text-weight-b mb-8">插槽定制more</tm-text>
<tm-avatar-group :list="list" round="8" :flat="true" :max-count="4" :count="1000" gutter="6">
<template v-slot:more>
<tm-sheet class="flex flex-center" width="64" height="64" :round="['8']" :margin="['0']"
:padding="['0']" color="primary">
<tm-icon size="32" color="white" name="add-line"></tm-icon>
</tm-sheet>
</template>
</tm-avatar-group>
</tm-sheet>
<view style="height: 32px;"></view>
</view>
</template>
<script setup lang="ts">
const list = [
"https://store.tmui.design/api_v2/public/random_picture?random=183",
"https://store.tmui.design/api_v2/public/random_picture?random=13",
"https://store.tmui.design/api_v2/public/random_picture?random=8",
"https://store.tmui.design/api_v2/public/random_picture?random=83",
"https://store.tmui.design/api_v2/public/random_picture?random=18",
"https://store.tmui.design/api_v2/public/random_picture?random=3",
"https://store.tmui.design/api_v2/public/random_picture?random=8",
"https://store.tmui.design/api_v2/public/random_picture?random=83",
"https://store.tmui.design/api_v2/public/random_picture?random=18",
"https://store.tmui.design/api_v2/public/random_picture?random=3",
] as string[]
const list2 = [
"同名自定义",
"Dclound",
"ak",
"sk",
"国家",
"天清色",
"漂亮",
"相爱一家人",
"北京",
"厉害了我的哥",
"呃",
] as string[]
const list3 = [
"同名自定义",
"https://store.tmui.design/api_v2/public/random_picture?random=8",
"",
"sk",
"https://store.tmui.design/api_v2/public/random_picture?random=3",
"",
"漂亮",
"https://store.tmui.design/api_v2/public/random_picture?random=3",
"北京",
"https://store.tmui.design/api_v2/public/random_picture?random=83",
"呃",
] as string[]
</script>
<style>
</style>🌶️ 兼容性
平台兼容
| H5 | uniAPP | 小程序 | version |
|---|---|---|---|
| ☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| list | string[] | ():string[]=>[]asstring[] | 头像列表,也可以是文本数组，也可以是空字符串数组 |
| size | string | '64' | 不允许使用auto,%只能数字或者带单位的数字2px,2rpx这种 |
| maxCount | number | 5 | 最多显示几个头像。 |
| round | string | '32' | 圆角 |
| gutter | string | '16' | 平铺或者堆叠时的间隙或者前推差值。不允许使用auto,%只能数字或者带单位的数字2px,2rpx这种 |
| model | string | "scaleToFill" | 显示类型见：https://doc.dcloud.net.cn/uni-app-x/component/image.html#属性 |
| count | number | 0 | 显示在最后一个时，显示的数字。如果为0取list的长度 |
| showCount | boolean | true | 是否显示最后一个数字头像 |
| flat | boolean | false | 是否平铺，如果否就是堆叠。是就是正常排列。 |
| bgColor | string | "#f5f5f5" | 如果为文本头像时的背景 |
| darkBgColor | string | "" | 如果为文本头像时的暗黑背景空时默认取inputDarkBgcolor |
| fontColor | string | "#a6a6a6" | 如果为文本头像时的文字颜色 |
| darkFontColor | string | "#ffffff" | 如果为文本头像时的暗黑背景空时默认取inputDarkBgcolor |
| fontSize | string | "28" | 字号 |
| randomBgColor | boolean | false | 文本头像时，是否随机背景色 |
| placeIcon | string | 'user-3-fill' | 如果当图片或者文本为空时的图片占位符可以是图片地址或者图标名称 |
🌹 事件
| 事件名 | 参数 | 返回数据 | 描述 |
|---|---|---|---|
| click | 名称：index,当前索引,名称：src,当前图片地址, | - | 头像被点击时 |
| moreClick | - | - | 最后一个数字头像more被点击时 |
🌽 slot插槽
| 插槽名 | 数据 | 描述 |
|---|---|---|
| more | - | more更多插槽，如果使用了这个插槽moreClick事件会丢失，请自己写在自己的布局上。 |
🥗 ref方法
| 方法名 | 参数 | 返回值 | 描述 |
|---|