fix(badge): fix ribbon overflow (#3074)

* fix(badge): fixed the overflow problem of ribbon badge fix #3063 * fix(badge): update snap * chore: update snap * fix(badge): create badge shape with clip-path, fixing the precision issue of the current method * refactor(badge): simplifie inline style * fix(badge): update snap --------- Co-authored-by: jarmywang <[email protected]>
Tencent · Aug 16, 2024 · cdb5b71 · cdb5b71
1 parent f500334
commit cdb5b71
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 37 deletions.
diff --git a/src/badge/badge.less b/src/badge/badge.less
@@ -19,8 +19,8 @@
 
 .@{prefix}-badge {
   position: relative;
-  display: inline-block;
-  vertical-align: top;
+  display: inline-flex;
+  align-items: start;
 
   &--basic {
     z-index: 100;
@@ -55,35 +55,16 @@
   &__ribbon {
     &-outer {
       position: absolute;
+      overflow: hidden;
       top: 0;
       right: 0;
-    }
-
-    &--before,
-    &--after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      bottom: 0;
-      border-bottom: @badge-basic-height solid @badge-color;
-    }
-
-    &--before {
-      left: calc(-1 * @badge-basic-height + 1rpx);
-      border-left: @badge-basic-height solid transparent;
-    }
-
-    &--after {
-      right: calc(-1 * @badge-basic-height + 1rpx);
-      border-right: @badge-basic-height solid transparent;
+      background-color: @badge-color;
     }
   }
 
   &--ribbon {
     display: inline-block;
-    transform: rotate(45deg);
-    transform-origin: center center;
+    transform-origin: top left;
     border-radius: 0;
     // padding: 0;
   }

diff --git a/src/badge/badge.ts b/src/badge/badge.ts
@@ -2,7 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import type { TdBadgeProps } from './type';
-import { uniqueFactory } from '../common/utils';
+import { getRect, uniqueFactory } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-badge`;
@@ -26,11 +26,29 @@ export default class Badge extends SuperComponent {
     value: '',
     labelID: '',
     descriptionID: '',
+    // ribbon
+    ribbonStyle: '',
+    ribbonOuterStyle: '',
   };
 
   lifetimes = {
     ready() {
       const uniqueID = getUniqueID();
+      if (this.properties.shape === 'ribbon') {
+        getRect(this, `.${prefix}-badge--ribbon`).then((rect) => {
+          const outerBoundingRect = rect.width / Math.SQRT2 + rect.height * Math.SQRT2; // 外接矩形的宽度：height * cos45deg + width / cos45deg
+          const translateX = rect.width - rect.width / Math.SQRT2 + outerBoundingRect - rect.width; // 旋转后的位移：原宽度 - 旋转后的宽度 + 外接矩形的宽度 - 原宽度
+          const ribbonHeightHypotenuse = rect.height * Math.SQRT2; // 斜边的长度：height * sin45deg
+          const ribbonWidthCatheti = rect.width / Math.SQRT2; // 直角边的长度：width / sin45deg
+          this.setData({
+            ribbonStyle: `transform: translateX(${translateX}px) rotate(45deg);`,
+            ribbonOuterStyle: `width: ${outerBoundingRect}px; height: ${outerBoundingRect}px;
+              clip-path: polygon(0 0, ${ribbonHeightHypotenuse}px 0,
+              ${outerBoundingRect}px ${ribbonWidthCatheti}px,
+              ${outerBoundingRect}px ${ribbonWidthCatheti + ribbonHeightHypotenuse}px);`,
+          });
+        });
+      }
 
       this.setData({
         labelID: `${uniqueID}_label`,

diff --git a/src/badge/badge.wxml b/src/badge/badge.wxml
@@ -8,7 +8,7 @@
 -->
 
 <view
-  style="{{_._style([style, customStyle])}}"
+  style="{{_._style([style, customStyle, ribbonOuterStyle])}}"
   class="{{this.getBadgeOuterClass({shape})}} class {{prefix}}-class"
   aria-labelledby="{{labelID}}"
   aria-describedby="{{descriptionID}}"
@@ -24,21 +24,11 @@
     wx:if="{{this.isShowBadge({dot,count,showZero})}}"
     id="{{descriptionID}}"
     class="{{this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
-    style="{{this.getBadgeStyles({color, offset})}}"
+    style="{{_._style([this.getBadgeStyles({color, offset}), ribbonStyle])}}"
     aria-hidden="true"
     aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
   >
-    <view
-      wx:if="{{shape == 'ribbon'}}"
-      class="t-badge__ribbon--before"
-      style="{{color ? 'border-color: ' + color : ''}}"
-    />
     {{ this.getBadgeValue({dot, count, maxCount}) }}
-    <view
-      wx:if="{{shape == 'ribbon'}}"
-      class="t-badge__ribbon--after"
-      style="{{color ? 'border-color: ' + color : ''}}"
-    />
   </view>
   <slot name="count" />
 </view>