feat(AvatarGroup): add collapsed-item-click event

Tencent · Sep 10, 2024 · 1697e37 · 1697e37
1 parent 765f6ef
commit 1697e37
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 5 deletions.
diff --git a/src/avatar-group/avatar-group.less b/src/avatar-group/avatar-group.less
@@ -24,8 +24,7 @@
   &-offset-left,
   &-offset-right {
     & .@{prefix}-avatar__wrapper {
-      margin-top: @avatar-group-line-spacing;
-      margin-bottom: @avatar-group-line-spacing;
+      padding: @avatar-group-line-spacing 0;
     }
 
     &-small {
@@ -48,6 +47,7 @@
   &__collapse--slot,
   &__collapse--default {
     z-index: 0;
+    font-weight: 600;
   }
 
   &__collapse--slot {

diff --git a/src/avatar-group/avatar-group.ts b/src/avatar-group/avatar-group.ts
@@ -74,5 +74,9 @@ export default class AvatarGroup extends SuperComponent {
         child.hide();
       });
     },
+
+    onCollapsedItemClick(e: WechatMiniprogram.CustomEvent) {
+      this.triggerEvent('collapsed-item-click', e.detail);
+    },
   };
 }
diff --git a/src/avatar-group/avatar-group.wxml b/src/avatar-group/avatar-group.wxml
@@ -7,7 +7,7 @@
     <slot name="collapse-avatar" />
   </view>
   <!-- 默认折叠元素 -->
-  <view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}">
+  <view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}" bindtap="onCollapsedItemClick">
     <t-avatar
       t-class-image="{{prefix}}-avatar--border {{prefix}}-avatar--border-{{size}} {{prefix}}-class-image"
       t-class-content="{{prefix}}-class-content"

diff --git a/src/avatar/__test__/__snapshots__/demo.test.js.snap b/src/avatar/__test__/__snapshots__/demo.test.js.snap
@@ -5,6 +5,7 @@ exports[`Avatar Avatar action demo works fine 1`] = `
   <t-avatar-group
     cascading="right-up"
     max="5"
+    bind:collapsed-item-click="onClickCollapsedAvatar"
   >
     <t-avatar
       image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"

diff --git a/src/avatar/_example/action/index.js b/src/avatar/_example/action/index.js
@@ -14,5 +14,8 @@ Component({
     onAddTap() {
       wx.showToast({ title: '您按下了添加', icon: 'none', duration: 1000 });
     },
+    onClickCollapsedAvatar() {
+      console.log('click collapsed avatar');
+    },
   },
 });
diff --git a/src/avatar/_example/action/index.wxml b/src/avatar/_example/action/index.wxml
@@ -1,3 +1,3 @@
-<t-avatar-group cascading="right-up" max="5">
+<t-avatar-group cascading="right-up" max="5" bind:collapsed-item-click="onClickCollapsedAvatar">
   <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" />
 </t-avatar-group>
diff --git a/src/avatar/avatar.wxml b/src/avatar/avatar.wxml
@@ -22,7 +22,7 @@
   >
     <view
       class="{{this.getClass(classPrefix, size || 'medium', shape, bordered)}} {{prefix}}-class-image"
-      style="{{this.getSize(size || 'medium')}}"
+      style="{{this.getSize(size)}}"
       aria-label="{{ ariaLabel || alt ||'头像'}}"
       aria-role="{{ ariaRole || 'img'}}"
       aria-hidden="{{ ariaHidden }}"