From 6f03e54a07d9d83caf684f48426ba4c2571bcdf9 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 12 Sep 2024 19:58:46 +0800 Subject: [PATCH 1/3] chore(Badge): use pseudo-element instead --- .../__test__/__snapshots__/demo.test.js.snap | 1 + src/badge/_example/theme/index.wxml | 4 +- src/badge/_example/theme/index.wxss | 6 ++- src/badge/badge.less | 28 ++++++++++++-- src/badge/badge.ts | 37 ++++++++++--------- src/badge/badge.wxml | 4 +- 6 files changed, 54 insertions(+), 26 deletions(-) diff --git a/src/badge/__test__/__snapshots__/demo.test.js.snap b/src/badge/__test__/__snapshots__/demo.test.js.snap index 8cc587881..27dbb501b 100644 --- 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`] = ` 角标 角标 - - + + diff --git a/src/badge/_example/theme/index.wxss b/src/badge/_example/theme/index.wxss index 93c21e75c..a0e9572e2 100644 --- 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; -} \ No newline at end of file +} + +.t-class-cell { + overflow: hidden; +} diff --git a/src/badge/badge.less b/src/badge/badge.less index 4263edfed..ff8982005 100644 --- 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 index c9d3d353e..5a4230fa6 100644 --- 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`; @@ -27,28 +27,29 @@ export default class Badge extends SuperComponent { labelID: '', descriptionID: '', // ribbon - ribbonStyle: '', - ribbonOuterStyle: '', + // 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);`, - }); - }); - } + // skyline render 暂不支持 clip-path，暂时改用伪元素实现，issue #3063 场景，需手动处理溢出隐藏 + // 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 index fbf265b7c..abc57b792 100644 --- a/src/badge/badge.wxml +++ b/src/badge/badge.wxml @@ -8,7 +8,7 @@ -->