refactor(components): [badge] show-zero implement (#18360)

packages/components/badge/__tests__/badge.test.tsx

@@ -70,16 +70,29 @@ describe('Badge', () => {
       <Badge showZero={showZero.value} value={badgeValue.value} />
     ))
     expect(wrapper.find('.el-badge__content').text()).toEqual('0')
-    badgeValue.value = 80
-    await nextTick()
-    expect(wrapper.find('.el-badge__content').text()).toEqual('80')
     showZero.value = false
+    await nextTick()
+    expect(wrapper.find('.el-badge__content').classes()).toContain(
+      'is-hide-zero'
+    )
+
+    badgeValue.value = 1
+    await nextTick()
+    expect(wrapper.find('.el-badge__content').text()).toEqual('1')
+    expect(wrapper.find('.el-badge__content').classes()).not.toContain(
+      'is-hide-zero'
+    )
     badgeValue.value = 0
     await nextTick()
-    expect(wrapper.find('.el-badge__content').text()).toEqual('')
-    badgeValue.value = 80
+    expect(wrapper.find('.el-badge__content').classes()).toContain(
+      'is-hide-zero'
+    )
+
+    showZero.value = true
     await nextTick()
-    expect(wrapper.find('.el-badge__content').text()).toEqual('80')
+    expect(wrapper.find('.el-badge__content').classes()).not.toContain(
+      'is-hide-zero'
+    )
   })
 
   test('showZero with max', async () => {

packages/components/badge/src/badge.vue

@@ -9,6 +9,7 @@
           ns.em('content', type),
           ns.is('fixed', !!$slots.default),
           ns.is('dot', isDot),
+          ns.is('hide-zero', !showZero && props.value === 0),
           badgeClass,
         ]"
         :style="style"
@@ -36,13 +37,11 @@ const ns = useNamespace('badge')
 const content = computed<string>(() => {
   if (props.isDot) return ''
   if (isNumber(props.value) && isNumber(props.max)) {
-    if (props.max < props.value) {
-      return `${props.max}+`
-    }
-    return props.value === 0 && !props.showZero ? '' : `${props.value}`
+    return props.max < props.value ? `${props.max}+` : `${props.value}`
   }
   return `${props.value}`
 })
+
 const style = computed<StyleValue>(() => {
   return [
     {

packages/theme-chalk/src/badge.scss

@@ -45,6 +45,10 @@
       border-radius: 50%;
     }
 
+    @include when(hide-zero) {
+      display: none;
+    }
+
     @each $type in (primary, success, warning, info, danger) {
       @include m($type) {
         background-color: getCssVar('color', $type);