feat(Badge): max support string type

src/badge/README.md

@@ -15,7 +15,7 @@ app.use(Badge);
 ### Basic Usage
 
 ```html
-<van-badge :content="5">
+<van-badge content="5">
   <div class="child" />
 </van-badge>
 <van-badge dot>
@@ -35,10 +35,10 @@ app.use(Badge);
 ### Max
 
 ```html
-<van-badge :content="20" :max="9">
+<van-badge content="20" max="9">
   <div class="child" />
 </van-badge>
-<van-badge :content="200" :max="99">
+<van-badge content="200" max="99">
   <div class="child" />
 </van-badge>
 ```
@@ -46,7 +46,7 @@ app.use(Badge);
 ### Custom Color
 
 ```html
-<van-badge :content="5" color="#1989fa">
+<van-badge content="5" color="#1989fa">
   <div class="child" />
 </van-badge>
 <van-badge dot color="#1989fa">
@@ -57,7 +57,7 @@ app.use(Badge);
 ### Standaline
 
 ```html
-<van-badge :content="200" :max="99" />
+<van-badge content="200" max="99" />
 ```
 
 ## API
@@ -66,10 +66,10 @@ app.use(Badge);
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| content | Badge content | _string \| number_ | - |
+| content | Badge content | _number \| string_ | - |
 | color | Background color | _string_ | `#ee0a24` |
 | dot | Whether to show dot | _boolean_ | `false` |
-| max | Max value，show `{max}+` when exceed，only works when content is number type | _number_ | - |
+| max | Max value，show `{max}+` when exceed，only works when content is number | _number \| string_ | - |
 
 ### Slots
 

src/badge/README.zh-CN.md

@@ -43,10 +43,10 @@ app.use(Badge);
 设置 `max` 属性后，当 `content` 的数值超过最大值时，会自动显示为 `{max}+`。
 
 ```html
-<van-badge :content="20" :max="9">
+<van-badge :content="20" max="9">
   <div class="child" />
 </van-badge>
-<van-badge :content="200" :max="99">
+<van-badge :content="200" max="99">
   <div class="child" />
 </van-badge>
 ```
@@ -69,7 +69,7 @@ app.use(Badge);
 当 Badge 没有子元素时，会作为一个独立的元素进行展示。
 
 ```html
-<van-badge :content="200" :max="99" />
+<van-badge :content="200" max="99" />
 ```
 
 ## API
@@ -78,10 +78,10 @@ app.use(Badge);
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| content | 徽标内容 | _string \| number_ | - |
+| content | 徽标内容 | _number \| string_ | - |
 | color | 徽标背景颜色 | _string_ | `#ee0a24` |
 | dot | 是否展示为小红点 | _boolean_ | `false` |
-| max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为 number 类型时有效 | _number_ | - |
+| max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
 
 ### Slots
 

src/badge/demo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <demo-section>
     <demo-block :title="t('basicUsage')">
-      <van-badge :content="5">
+      <van-badge content="5">
         <div class="child" />
       </van-badge>
       <van-badge dot>
@@ -10,16 +10,16 @@
     </demo-block>
 
     <demo-block :title="t('max')">
-      <van-badge :content="20" :max="9">
+      <van-badge content="20" max="9">
         <div class="child" />
       </van-badge>
-      <van-badge :content="200" :max="99">
+      <van-badge content="200" max="99">
         <div class="child" />
       </van-badge>
     </demo-block>
 
     <demo-block :title="t('customColor')">
-      <van-badge :content="5" :color="BLUE">
+      <van-badge content="5" :color="BLUE">
         <div class="child" />
       </van-badge>
       <van-badge dot :color="BLUE">
@@ -28,7 +28,7 @@
     </demo-block>
 
     <demo-block :title="t('standalone')">
-      <van-badge :content="200" :max="99" style="margin-left: 16px;" />
+      <van-badge content="200" max="99" style="margin-left: 16px;" />
     </demo-block>
   </demo-section>
 </template>

src/badge/index.tsx

@@ -1,12 +1,13 @@
 import type { PropType } from 'vue';
 import { isDef, createNamespace } from '../utils';
+import { isNumeric } from '../utils/validate/number';
 
 const [createComponent, bem] = createNamespace('badge');
 
 export default createComponent({
   props: {
-    max: Number,
     dot: Boolean,
+    max: [Number, String],
     color: String,
     content: [Number, String],
     tag: {
@@ -27,7 +28,7 @@ export default createComponent({
           return slots.content();
         }
 
-        if (isDef(max) && typeof content === 'number' && content > max) {
+        if (isDef(max) && isNumeric(content!) && +content > max) {
           return `${max}+`;
         }
 

src/utils/format/unit.ts

@@ -6,8 +6,7 @@ export function addUnit(value?: string | number): string | undefined {
     return undefined;
   }
 
-  value = String(value);
+  return isNumeric(value) ? `${value}px` : String(value);
-  return isNumeric(value) ? `${value}px` : value;
 }
 
 export function getSizeStyle(originSize?: string | number) {

src/utils/test/index.spec.js

@@ -91,6 +91,7 @@ test('isMobile', () => {
 });
 
 test('isNumeric', () => {
+  expect(isNumeric(1)).toBeTruthy();
   expect(isNumeric('1')).toBeTruthy();
   expect(isNumeric('1.2')).toBeTruthy();
   expect(isNumeric('1..2')).toBeFalsy();

src/utils/validate/number.ts

@@ -1,5 +1,5 @@
-export function isNumeric(val: string): boolean {
+export function isNumeric(val: string | number): val is string {
-  return /^\d+(\.\d+)?$/.test(val);
+  return typeof val === 'number' || /^\d+(\.\d+)?$/.test(val);
 }
 
 export function isNaN(val: number): val is typeof NaN {