chore(Badge): use pseudo-element instead (#3144)

* chore(Badge): use pseudo-element instead * chore: remove unused code * docs: add FAQ
Tencent · Sep 14, 2024 · 62f54fd · 62f54fd
1 parent 1fa0568
commit 62f54fd
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 28 deletions.
diff --git a/src/badge/README.md b/src/badge/README.md
@@ -36,6 +36,11 @@ isComponent: true
 
 {{ size }}
 
+## FAQ
+
+### 如何处理由 ribbon 徽标溢出导致页面出现横向滚动？
+角标溢出问题建议从父容器组件处理。如 <a href="https://github.com/Tencent/tdesign-miniprogram/issues/3063" title="如 #3063 " target="_blank" rel="noopener noreferrer"> #3063 </a>，可以给父容器 `cell` 组件添加 `overflow: hidden`，处理溢出造成页面出现横向滚动的问题。
+
 ## API
 
 ### Badge Props

diff --git a/src/badge/__test__/__snapshots__/demo.test.js.snap b/src/badge/__test__/__snapshots__/demo.test.js.snap
@@ -252,6 +252,7 @@ exports[`Badge Badge theme demo works fine 1`] = `
     角标
   </wx-view>
   <t-cell
+    tClass="t-class-cell"
     title="单行标题"
   >
     <t-badge

diff --git a/src/badge/_example/theme/index.wxml b/src/badge/_example/theme/index.wxml
@@ -27,6 +27,6 @@
 </view>
 
 <view class="demo-desc" style="margin-bottom: 32rpx">角标</view>
-<t-cell title="单行标题">
-  <t-badge count="New" offset="{{skylineRender ? [-8, -20]: [0, 0]}}" shape="ribbon" slot="note" />
+<t-cell title="单行标题" t-class="t-class-cell">
+  <t-badge count="New" offset="{{skylineRender ? ['-16rpx', '-56rpx']: [0, 0]}}" shape="ribbon" slot="note" />
 </t-cell>
diff --git a/src/badge/_example/theme/index.wxss b/src/badge/_example/theme/index.wxss
@@ -4,4 +4,8 @@
   margin-top: 28px;
   margin-bottom: 24px;
   align-items: center;
-}
+}
+
+.t-class-cell {
+  overflow: hidden;
+}
diff --git a/src/badge/badge.less b/src/badge/badge.less
@@ -55,18 +55,39 @@
   &__ribbon {
     &-outer {
       position: absolute;
-      overflow: hidden;
       top: 0;
       right: 0;
-      background-color: @badge-color;
     }
   }
 
   &--ribbon {
+    position: relative;
     display: inline-block;
-    transform-origin: top left;
+    transform-origin: center center;
+    transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
     border-radius: 0;
     // padding: 0;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
+      bottom: 0;
+      border-bottom: @badge-basic-height solid @badge-color;
+      font-size: 0;
+    }
+
+    &::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;
+    }
   }
 
   &--bubble {
@@ -87,6 +108,7 @@
   }
 
   &__content:not(:empty) + .t-has-count {
+    transform-origin: center center;
     transform: translate(-50%, -50%);
     position: absolute;
     left: 100%;

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 { getRect, uniqueFactory } from '../common/utils';
+import { uniqueFactory } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-badge`;
@@ -26,30 +26,11 @@ 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`,
         descriptionID: `${uniqueID}_description`,

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