feat(Badge): add show-zero prop (#8381)

src/badge/Badge.tsx

@@ -17,11 +17,20 @@ export default defineComponent({
       type: String as PropType<keyof HTMLElementTagNameMap>,
       default: 'div',
     },
+    showZero: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   setup(props, { slots }) {
-    const hasContent = () =>
+    const hasContent = () => {
-      !!(slots.content || (isDef(props.content) && props.content !== ''));
+      if (slots.content) {
+        return true;
+      }
+      const { content, showZero } = props;
+      return isDef(content) && content !== '' && (showZero || content !== 0);
+    };
 
     const renderContent = () => {
       const { dot, max, content } = props;

src/badge/README.md

@@ -120,6 +120,7 @@ Use `content` slot to custom :content of badge.
 | dot | Whether to show dot | _boolean_ | `false` |
 | max | Max value，show `{max}+` when exceed，only works when content is number | _number \| string_ | - |
 | offset `v3.0.5` | Offset of badge dot | _[number, number]_ | - |
+| show-zero `v3.0.10` | Whether to show badge when content is zero | _boolean_ | `true` |
 
 ### Slots
 

src/badge/README.zh-CN.md

@@ -132,6 +132,7 @@ app.use(Badge);
 | dot | 是否展示为小红点 | _boolean_ | `false` |
 | max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
 | offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量 | _[number, number]_ | - |
+| show-zero `v3.0.10` | 当 content 为数字 0 时，是否展示徽标 | _boolean_ | `true` |
 
 ### Slots
 

src/badge/test/index.spec.ts

@@ -69,3 +69,16 @@ test('should change dot position when using offset prop without children', () =>
   expect(badge.style.marginTop).toEqual('4px');
   expect(badge.style.marginLeft).toEqual('2px');
 });
+
+test('should not render zero when show-zero is false', async () => {
+  const wrapper = mount(Badge, {
+    props: {
+      content: 0,
+    },
+  });
+
+  expect(wrapper.find('.van-badge').exists()).toBeTruthy();
+
+  await wrapper.setProps({ showZero: false });
+  expect(wrapper.find('.van-badge').exists()).toBeFalsy();
+});