diff --git a/example/app.json b/example/app.json
index 5214c75ec..c3f6d3631 100644
--- a/example/app.json
+++ b/example/app.json
@@ -60,6 +60,7 @@
"t-demo": "components/demo-block/index",
"pull-down-list": "components/pull-down-list/index",
"t-avatar": "tdesign-miniprogram/avatar/avatar",
+ "t-avatar-group": "tdesign-miniprogram/avatar/avatar-group",
"t-badge": "tdesign-miniprogram/badge/badge",
"t-button": "tdesign-miniprogram/button/button",
"t-cell": "tdesign-miniprogram/cell/cell",
@@ -128,4 +129,4 @@
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
-}
\ No newline at end of file
+}
diff --git a/example/pages/avatar/avatar.wxml b/example/pages/avatar/avatar.wxml
index 2e73d6ea5..66a121562 100644
--- a/example/pages/avatar/avatar.wxml
+++ b/example/pages/avatar/avatar.wxml
@@ -82,8 +82,8 @@
wx:for-item="pic"
wx:key="index"
image="{{pic}}"
- t-class-image="img-medium"
- t-class="medium"
+ t-class-image="img-large"
+ t-class="large"
/>
diff --git a/src/avatar/avatar-group.less b/src/avatar/avatar-group.less
index 03e15d55d..e8ae89df2 100644
--- a/src/avatar/avatar-group.less
+++ b/src/avatar/avatar-group.less
@@ -1,7 +1,6 @@
@import '../common/style/index.less';
.@{prefix}-avatar-group {
- // display: flex;
display: block;
&--content {
@@ -9,7 +8,7 @@
}
&--large {
- .t-avatar--large {
+ .t-size-l {
width: 96rpx;
height: 96rpx;
font-weight: 600;
@@ -18,7 +17,7 @@
}
&--medium {
- .t-avatar--large {
+ .t-size-m {
width: 80rpx;
height: 80rpx;
font-weight: 600;
@@ -27,7 +26,7 @@
}
&--small {
- .t-avatar--large {
+ .t-size-s {
width: 64rpx;
height: 64rpx;
font-weight: 600;
@@ -35,21 +34,21 @@
}
}
- .slot-collapse-avatar {
+ &__collapse--slot {
float: left;
}
- .slot-collapse-avatar:empty + .default-collapse-avatar {
- display: block;
+ &__collapse--slot:not(:empty) + &__collapse--default {
+ display: none;
float: left;
}
- .slot-collapse-avatar:not(:empty) + .default-collapse-avatar {
- display: none;
+ &__collapse--slot:empty + &__collapse--default {
+ display: block;
float: left;
}
- .hide-collapse-avatar {
+ .t-is-hidden {
display: none;
}
diff --git a/src/avatar/avatar-group.ts b/src/avatar/avatar-group.ts
index 7f3c854df..57251ab7c 100644
--- a/src/avatar/avatar-group.ts
+++ b/src/avatar/avatar-group.ts
@@ -58,7 +58,8 @@ export default class AvatarGroup extends SuperComponent {
*/
handleChildSlot(max, children, f) {
const query = this.createSelectorQuery();
- query.select('.slot-collapse-avatar').boundingClientRect();
+ const slotName = `.${this.data.classPrefix}__collapse--slot`;
+ query.select(slotName).boundingClientRect();
query.exec((res) => {
const isSlot = !!res[0].width;
f(max, children, isSlot);
diff --git a/src/avatar/avatar-group.wxml b/src/avatar/avatar-group.wxml
index 04302fff3..a38759a07 100644
--- a/src/avatar/avatar-group.wxml
+++ b/src/avatar/avatar-group.wxml
@@ -6,11 +6,11 @@
>
-
+
-
+
-1;
- return isIncludePx ? '' : classPrefix + '--' + (size || 'medium');
+ return isIncludePx ? '' : 't-size-' + (size || 'medium').slice(0, 1);
},
getAvatarOuterClass: function (classPrefix, size, shape) {
var isIncludePx = size.indexOf('px') > -1;
var classNames = [
classPrefix,
classPrefix + (shape === 'round' ? '--round' : '--circle'),
- isIncludePx ? '' : classPrefix + '--' + (size || 'medium'),
+ isIncludePx ? '' : 't-size-' + (size || 'medium').slice(0, 1),
];
return classNames.join(' ');
},