feat(Badge): update demo

Author: anlyyao

packages/components/badge/__test__/__snapshots__/demo.test.js.snap

@@ -267,5 +267,27 @@ exports[`Badge Badge theme demo works fine 1`] = `
       slot="note"
     />
   </t-cell>
+  <wx-view
+    class="demo-desc"
+    style="margin-bottom: 32rpx"
+  >
+    三角角标
+  </wx-view>
+  <t-cell
+    tClass="t-class-cell"
+    title="单行标题"
+  >
+    <t-badge
+      count="New"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="triangle-right"
+      slot="note"
+    />
+  </t-cell>
 </theme>
 `;

packages/components/badge/_example/theme/index.wxml

@@ -28,5 +28,10 @@
 
 <view class="demo-desc" style="margin-bottom: 32rpx">角标</view>
 <t-cell title="单行标题" t-class="t-class-cell">
-  <t-badge count="New" offset="{{skylineRender ? ['-16rpx', '-56rpx']: [0, 0]}}" shape="ribbon" slot="note" />
+  <t-badge count="New" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon" slot="note" />
+</t-cell>
+
+<view class="demo-desc" style="margin-bottom: 32rpx">三角角标</view>
+<t-cell title="单行标题" t-class="t-class-cell">
+  <t-badge count="New" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-right" slot="note" />
 </t-cell>

packages/components/badge/badge.ts

@@ -26,34 +26,33 @@ export default class Badge extends SuperComponent {
     value: '',
     labelID: '',
     descriptionID: '',
-    hasActualContent: false,
+    useOuterClass: false,
   };
 
   lifetimes = {
     ready() {
       const uniqueID = getUniqueID();
-      const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
+
       this.setData({
         labelID: `${uniqueID}_label`,
         descriptionID: `${uniqueID}_description`,
       });
 
-      if (target.includes(this.properties.shape)) {
-        this.checkForActualContent();
-      }
+      this.checkForActualContent();
     },
   };
 
   methods = {
     checkForActualContent() {
-      if (this.properties.content) {
-        this.setData({ hasActualContent: true });
+      const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
+      if (this.properties.content || !target.includes(this.properties.shape)) {
+        this.setData({ useOuterClass: true });
         return;
       }
 
       return getRect(this, `.${name}__content`).then((rect) => {
         const hasSlotContent = rect.width > 0 || rect.height > 0;
-        this.setData({ hasActualContent: hasSlotContent });
+        this.setData({ useOuterClass: hasSlotContent });
       });
     },
   };

packages/components/badge/badge.wxml

@@ -9,7 +9,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{classPrefix}} {{ !hasActualContent? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class"
+  class="{{classPrefix}} {{ !useOuterClass? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class"
   aria-labelledby="{{labelID}}"
   aria-describedby="{{descriptionID}}"
   aria-role="{{ ariaRole || 'option'}}"