fix(Badge): fix count slot invalid (#4085)

Author: anlyyao

packages/components/avatar/__test__/__snapshots__/index.test.js.snap

@@ -38,6 +38,13 @@ exports[`Avatar & Avatar Groups Avatar Props : style && customStyle 1`] = `
               />
             </wx-view>
           </wx-view>
+          <wx-view
+            ariaHidden="true"
+            ariaLabel="有0条消息"
+            class="t-badge--basic  t-badge--medium t-badge--circle t-badge--count t-has-count t-class-count"
+            id="t_badge_0_description"
+            style=""
+          />
         </wx-view>
       </t-badge>
     </wx-view>

packages/components/badge/__test__/index.test.js

@@ -184,7 +184,7 @@ describe('badge', () => {
     comp.attach(document.createElement('parent-wrapper'));
 
     const $count = comp.querySelector('.badge >>> .t-badge--basic');
-    expect($count).toBeUndefined();
+    expect($count.dom.textContent.trim()).toBe('');
 
     comp.setData({ showZero: true });
 

packages/components/badge/badge.wxml

@@ -9,7 +9,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_this.getBadgeOuterClass({shape})}} class {{prefix}}-class"
+  class="{{_this.getBadgeOuterClass({classPrefix, shape})}} class {{prefix}}-class"
   aria-labelledby="{{labelID}}"
   aria-describedby="{{descriptionID}}"
   aria-role="{{ ariaRole || 'option'}}"
@@ -21,14 +21,15 @@
   <view
     aria-hidden="true"
     aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
-    wx:if="{{_this.isShowBadge({dot,count,showZero})}}"
     id="{{descriptionID}}"
-    class="{{_this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
+    class="{{_this.getBadgeInnerClass({classPrefix, dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
     style="{{_._style([_this.getBadgeStyles({color, offset})])}}"
     aria-hidden="true"
     aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
   >
-    {{ _this.getBadgeValue({dot, count, maxCount}) }}
+    <block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">
+      {{ _this.getBadgeValue({dot, count, maxCount}) }}
+    </block>
+    <slot else name="count" />
   </view>
-  <slot name="count" />
 </view>

packages/components/badge/badge.wxs

@@ -36,19 +36,19 @@ var getBadgeStyles = function (props) {
 };
 
 var getBadgeOuterClass = function (props) {
-  var baseClass = 't-badge';
+  var baseClass = props.classPrefix;
   var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
   return classNames.join(' ');
 };
 
 var getBadgeInnerClass = function (props) {
-  var baseClass = 't-badge';
+  var baseClass = props.classPrefix;
   var classNames = [
     baseClass + '--basic',
     props.dot ? baseClass + '--dot' : '',
     baseClass + '--' + props.size,
     baseClass + '--' + props.shape,
-    !props.dot && props.count ? baseClass + '--count' : '',
+    !props.dot ? baseClass + '--count' : '',
   ];
   return classNames.join(' ');
 };