perf: add numericProp helper (#9602)

packages/vant/src/action-bar-icon/ActionBarIcon.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { extend, createNamespace, unknownProp } from '../utils';
+import { extend, createNamespace, unknownProp, numericProp } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
 // Composables
@@ -20,7 +20,7 @@ export default defineComponent({
     text: String,
     icon: String,
     color: String,
-    badge: [Number, String],
+    badge: numericProp,
     iconClass: unknownProp,
     iconPrefix: String,
   }),

packages/vant/src/address-edit/AddressEdit.tsx

@@ -15,6 +15,8 @@ import {
   isObject,
   isMobile,
   truthProp,
+  numericProp,
+  makeNumericProp,
   createNamespace,
 } from '../utils';
 
@@ -65,20 +67,14 @@ const props = {
   showPostal: Boolean,
   disableArea: Boolean,
   searchResult: Array as PropType<AddressEditSearchItem[]>,
-  telMaxlength: [Number, String],
+  telMaxlength: numericProp,
   showSetDefault: Boolean,
   saveButtonText: String,
   areaPlaceholder: String,
   deleteButtonText: String,
   showSearchResult: Boolean,
-  detailRows: {
+  detailRows: makeNumericProp(1),
-    type: [Number, String],
+  detailMaxlength: makeNumericProp(200),
-    default: 1,
-  },
-  detailMaxlength: {
-    type: [Number, String],
-    default: 200,
-  },
   addressInfo: {
     type: Object as PropType<Partial<AddressEditInfo>>,
     default: () => extend({}, DEFAULT_DATA),

packages/vant/src/address-edit/AddressEditDetail.tsx

@@ -1,7 +1,7 @@
 import { PropType, ref, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, numericProp } from '../utils';
 
 // Components
 import { Cell } from '../cell';
@@ -20,10 +20,10 @@ export default defineComponent({
     show: Boolean,
     value: String,
     focused: Boolean,
-    detailRows: [Number, String],
+    detailRows: numericProp,
     searchResult: Array as PropType<AddressEditSearchItem[]>,
     errorMessage: String,
-    detailMaxlength: [Number, String],
+    detailMaxlength: numericProp,
     showSearchResult: Boolean,
   },
 

packages/vant/src/address-list/AddressList.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, numericProp, createNamespace } from '../utils';
 
 // Components
 import { Button } from '../button';
@@ -14,7 +14,7 @@ export default defineComponent({
   name,
 
   props: {
-    modelValue: [Number, String],
+    modelValue: numericProp,
     switchable: truthProp,
     disabledText: String,
     addButtonText: String,

packages/vant/src/area/Area.tsx

@@ -12,7 +12,7 @@ import {
 
 // Utils
 import { deepClone } from '../utils/deep-clone';
-import { pick, createNamespace, extend } from '../utils';
+import { pick, createNamespace, extend, makeNumericProp } from '../utils';
 import { pickerProps } from '../picker/Picker';
 
 // Composables
@@ -50,14 +50,11 @@ const isOverseaCode = (code: string) => code[0] === '9';
 
 const props = extend({}, pickerProps, {
   value: String,
+  columnsNum: makeNumericProp(3),
   areaList: {
     type: Object as PropType<AreaList>,
     default: () => ({}),
   },
-  columnsNum: {
-    type: [Number, String],
-    default: 3,
-  },
   isOverseaCode: {
     type: Function as PropType<(code: string) => boolean>,
     default: isOverseaCode,

packages/vant/src/badge/Badge.tsx

@@ -4,6 +4,7 @@ import {
   addUnit,
   isNumeric,
   truthProp,
+  numericProp,
   createNamespace,
 } from '../utils';
 
@@ -14,10 +15,10 @@ export default defineComponent({
 
   props: {
     dot: Boolean,
-    max: [Number, String],
+    max: numericProp,
     color: String,
     offset: Array as unknown as PropType<[string | number, string | number]>,
-    content: [Number, String],
+    content: numericProp,
     showZero: truthProp,
     tag: {
       type: String as PropType<keyof HTMLElementTagNameMap>,

packages/vant/src/button/Button.tsx

@@ -6,7 +6,12 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, BORDER_SURROUND, extend } from '../utils';
+import {
+  extend,
+  numericProp,
+  createNamespace,
+  BORDER_SURROUND,
+} from '../utils';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
@@ -39,7 +44,7 @@ export default defineComponent({
     hairline: Boolean,
     disabled: Boolean,
     iconPrefix: String,
-    loadingSize: [Number, String],
+    loadingSize: numericProp,
     loadingText: String,
     loadingType: String as PropType<LoadingType>,
     tag: {

packages/vant/src/calendar/Calendar.tsx

@@ -9,7 +9,14 @@ import {
 } from 'vue';
 
 // Utils
-import { pick, isDate, truthProp, getScrollTop } from '../utils';
+import {
+  pick,
+  isDate,
+  truthProp,
+  numericProp,
+  getScrollTop,
+  makeNumericProp,
+} from '../utils';
 import {
   t,
   bem,
@@ -56,7 +63,7 @@ const props = {
   showMark: truthProp,
   showTitle: truthProp,
   formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
-  rowHeight: [Number, String],
+  rowHeight: numericProp,
   confirmText: String,
   rangePrompt: String,
   lazyRender: truthProp,
@@ -76,10 +83,7 @@ const props = {
     type: String as PropType<PopupPosition>,
     default: 'bottom',
   },
-  maxRange: {
+  maxRange: makeNumericProp(null),
-    type: [Number, String],
-    default: null,
-  },
   minDate: {
     type: Date,
     validator: isDate,
@@ -94,7 +98,7 @@ const props = {
     },
   },
   firstDayOfWeek: {
-    type: [Number, String],
+    type: numericProp,
     default: 0,
     validator: (val: number) => val >= 0 && val <= 6,
   },

packages/vant/src/calendar/CalendarMonth.tsx

@@ -7,7 +7,13 @@ import {
 } from 'vue';
 
 // Utils
-import { addUnit, setScrollTop, createNamespace, pick } from '../utils';
+import {
+  pick,
+  addUnit,
+  numericProp,
+  setScrollTop,
+  createNamespace,
+} from '../utils';
 import { getMonthEndDay } from '../datetime-picker/utils';
 import {
   t,
@@ -35,7 +41,7 @@ const props = {
   type: String as PropType<CalendarType>,
   color: String,
   showMark: Boolean,
-  rowHeight: [Number, String],
+  rowHeight: numericProp,
   formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
   lazyRender: Boolean,
   currentDate: [Date, Array] as PropType<Date | Date[] | null>,

packages/vant/src/card/Card.tsx

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, isDef } from '../utils';
+import { isDef, numericProp, createNamespace } from '../utils';
 
 // Components
 import { Tag } from '../tag';
@@ -14,15 +14,15 @@ export default defineComponent({
 
   props: {
     tag: String,
-    num: [Number, String],
+    num: numericProp,
     desc: String,
     thumb: String,
     title: String,
-    price: [Number, String],
+    price: numericProp,
     centered: Boolean,
     lazyLoad: Boolean,
     thumbLink: String,
-    originPrice: [Number, String],
+    originPrice: numericProp,
     currency: {
       type: String,
       default: '¥',

packages/vant/src/cascader/Cascader.tsx

@@ -1,5 +1,5 @@
 import { nextTick, PropType, reactive, watch, defineComponent } from 'vue';
-import { createNamespace, truthProp, extend } from '../utils';
+import { extend, numericProp, truthProp, createNamespace } from '../utils';
 
 // Components
 import { Tab } from '../tab';
@@ -40,7 +40,7 @@ export default defineComponent({
     title: String,
     closeable: truthProp,
     swipeable: truthProp,
-    modelValue: [Number, String],
+    modelValue: numericProp,
     fieldNames: Object as PropType<CascaderFieldNames>,
     placeholder: String,
     activeColor: String,

packages/vant/src/cell/Cell.tsx

@@ -2,11 +2,12 @@ import { PropType, CSSProperties, defineComponent } from 'vue';
 
 // Utils
 import {
-  createNamespace,
-  extend,
   isDef,
+  extend,
   truthProp,
   unknownProp,
+  numericProp,
+  createNamespace,
 } from '../utils';
 
 // Composables
@@ -22,9 +23,9 @@ export type CellArrowDirection = 'up' | 'down' | 'left' | 'right';
 export const cellProps = {
   icon: String,
   size: String as PropType<'large'>,
-  title: [Number, String],
+  title: numericProp,
-  value: [Number, String],
+  value: numericProp,
-  label: [Number, String],
+  label: numericProp,
   center: Boolean,
   isLink: Boolean,
   border: truthProp,

packages/vant/src/checkbox-group/CheckboxGroup.tsx

@@ -7,7 +7,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { numericProp, createNamespace } from '../utils';
 
 // Composables
 import { useChildren, useCustomFieldValue } from '@vant/use';
@@ -24,10 +24,10 @@ import type {
 const [name, bem] = createNamespace('checkbox-group');
 
 const props = {
-  max: [Number, String],
+  max: numericProp,
   disabled: Boolean,
   direction: String as PropType<CheckerDirection>,
-  iconSize: [Number, String],
+  iconSize: numericProp,
   checkedColor: String,
   modelValue: {
     type: Array as PropType<unknown[]>,

packages/vant/src/checkbox/Checker.tsx

@@ -1,5 +1,5 @@
 import { ref, computed, PropType, defineComponent } from 'vue';
-import { addUnit, extend, unknownProp, truthProp } from '../utils';
+import { extend, addUnit, truthProp, numericProp, unknownProp } from '../utils';
 import { Icon } from '../icon';
 
 export type CheckerShape = 'square' | 'round';
@@ -17,7 +17,7 @@ export type CheckerParent = {
 export const checkerProps = {
   name: unknownProp,
   disabled: Boolean,
-  iconSize: [Number, String],
+  iconSize: numericProp,
   modelValue: unknownProp,
   checkedColor: String,
   labelPosition: String as PropType<CheckerLabelPosition>,

packages/vant/src/circle/Circle.tsx

@@ -1,6 +1,13 @@
 import { watch, computed, PropType, CSSProperties, defineComponent } from 'vue';
 import { raf, cancelRaf } from '@vant/use';
-import { isObject, getSizeStyle, truthProp, createNamespace } from '../utils';
+import {
+  isObject,
+  truthProp,
+  numericProp,
+  getSizeStyle,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
 
 const [name, bem] = createNamespace('circle');
 
@@ -22,31 +29,22 @@ export default defineComponent({
 
   props: {
     text: String,
-    size: [Number, String],
+    size: numericProp,
+    rate: makeNumericProp(100),
+    speed: makeNumericProp(0),
     color: [String, Object] as PropType<string | Record<string, string>>,
     clockwise: truthProp,
     layerColor: String,
+    strokeWidth: makeNumericProp(40),
     strokeLinecap: String as PropType<CanvasLineCap>,
     currentRate: {
       type: Number,
       default: 0,
     },
-    speed: {
-      type: [Number, String],
-      default: 0,
-    },
     fill: {
       type: String,
       default: 'none',
     },
-    rate: {
-      type: [Number, String],
-      default: 100,
-    },
-    strokeWidth: {
-      type: [Number, String],
-      default: 40,
-    },
     startPosition: {
       type: String as PropType<CircleStartPosition>,
       default: 'top',

packages/vant/src/col/Col.tsx

@@ -1,5 +1,5 @@
 import { computed, PropType, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { numericProp, createNamespace, makeNumericProp } from '../utils';
 import { useParent } from '@vant/use';
 import { ROW_KEY } from '../row/Row';
 
@@ -9,15 +9,12 @@ export default defineComponent({
   name,
 
   props: {
-    offset: [Number, String],
+    span: makeNumericProp(0),
+    offset: numericProp,
     tag: {
       type: String as PropType<keyof HTMLElementTagNameMap>,
       default: 'div',
     },
-    span: {
-      type: [Number, String],
-      default: 0,
-    },
   },
 
   setup(props, { slots }) {

packages/vant/src/collapse-item/CollapseItem.tsx

@@ -9,7 +9,13 @@ import {
 
 // Utils
 import { cellProps } from '../cell/Cell';
-import { createNamespace, extend, pick, truthProp } from '../utils';
+import {
+  pick,
+  extend,
+  truthProp,
+  numericProp,
+  createNamespace,
+} from '../utils';
 import { COLLAPSE_KEY } from '../collapse/Collapse';
 
 // Composables
@@ -25,7 +31,7 @@ const [name, bem] = createNamespace('collapse-item');
 const CELL_SLOTS = ['icon', 'title', 'value', 'label', 'right-icon'] as const;
 
 const props = extend({}, cellProps, {
-  name: [Number, String],
+  name: numericProp,
   isLink: truthProp,
   disabled: Boolean,
   readonly: Boolean,

packages/vant/src/count-down/CountDown.tsx

@@ -1,7 +1,7 @@
 import { watch, computed, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, createNamespace, makeNumericProp } from '../utils';
 import { parseFormat } from './utils';
 
 // Composables
@@ -11,12 +11,9 @@ import { useExpose } from '../composables/use-expose';
 const [name, bem] = createNamespace('count-down');
 
 const props = {
+  time: makeNumericProp(0),
   autoStart: truthProp,
   millisecond: Boolean,
-  time: {
-    type: [Number, String],
-    default: 0,
-  },
   format: {
     type: String,
     default: 'HH:mm:ss',

packages/vant/src/coupon-cell/CouponCell.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { isDef, truthProp, createNamespace } from '../utils';
+import { isDef, truthProp, makeNumericProp, createNamespace } from '../utils';
 
 // Components
 import { Cell } from '../cell';
@@ -40,6 +40,7 @@ export default defineComponent({
     title: String,
     border: truthProp,
     editable: truthProp,
+    chosenCoupon: makeNumericProp(-1),
     coupons: {
       type: Array as PropType<CouponInfo[]>,
       default: () => [],
@@ -48,10 +49,6 @@ export default defineComponent({
       type: String,
       default: '¥',
     },
-    chosenCoupon: {
-      type: [Number, String],
-      default: -1,
-    },
   },
 
   setup(props) {

packages/vant/src/datetime-picker/TimePicker.tsx

@@ -8,7 +8,14 @@ import {
 } from 'vue';
 
 // Utils
-import { pick, clamp, extend, padZero, createNamespace } from '../utils';
+import {
+  pick,
+  clamp,
+  extend,
+  padZero,
+  createNamespace,
+  makeNumericProp,
+} from '../utils';
 import { times, sharedProps, pickerKeys } from './utils';
 
 // Composables
@@ -23,23 +30,11 @@ export default defineComponent({
   name,
 
   props: extend({}, sharedProps, {
+    minHour: makeNumericProp(0),
+    maxHour: makeNumericProp(23),
+    minMinute: makeNumericProp(0),
+    maxMinute: makeNumericProp(59),
     modelValue: String,
-    minHour: {
-      type: [Number, String],
-      default: 0,
-    },
-    maxHour: {
-      type: [Number, String],
-      default: 23,
-    },
-    minMinute: {
-      type: [Number, String],
-      default: 0,
-    },
-    maxMinute: {
-      type: [Number, String],
-      default: 59,
-    },
   }),
 
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],

packages/vant/src/dialog/Dialog.tsx

@@ -10,6 +10,7 @@ import {
   BORDER_TOP,
   BORDER_LEFT,
   unknownProp,
+  numericProp,
   callInterceptor,
   createNamespace,
 } from '../utils';
@@ -43,7 +44,7 @@ export default defineComponent({
   props: extend({}, popupSharedProps, {
     title: String,
     theme: String as PropType<DialogTheme>,
-    width: [Number, String],
+    width: numericProp,
     message: [String, Function] as PropType<DialogMessage>,
     callback: Function as PropType<(action?: DialogAction) => void>,
     allowHtml: Boolean,

packages/vant/src/dropdown-menu/DropdownMenu.tsx

@@ -9,7 +9,14 @@ import {
 } from 'vue';
 
 // Utils
-import { isDef, truthProp, createNamespace, ComponentInstance } from '../utils';
+import {
+  isDef,
+  truthProp,
+  numericProp,
+  createNamespace,
+  makeNumericProp,
+  ComponentInstance,
+} from '../utils';
 
 // Composables
 import {
@@ -27,14 +34,11 @@ const [name, bem] = createNamespace('dropdown-menu');
 
 const props = {
   overlay: truthProp,
-  zIndex: [Number, String],
+  zIndex: numericProp,
+  duration: makeNumericProp(0.2),
   activeColor: String,
   closeOnClickOutside: truthProp,
   closeOnClickOverlay: truthProp,
-  duration: {
-    type: [Number, String],
-    default: 0.2,
-  },
   direction: {
     type: String as PropType<DropdownMenuDirection>,
     default: 'down',

packages/vant/src/empty/Empty.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { createNamespace, getSizeStyle } from '../utils';
+import { createNamespace, getSizeStyle, numericProp } from '../utils';
 import { Network } from './Network';
 
 const [name, bem] = createNamespace('empty');
@@ -10,7 +10,7 @@ export default defineComponent({
   name,
 
   props: {
-    imageSize: [Number, String],
+    imageSize: numericProp,
     description: String,
     image: {
       type: String,

packages/vant/src/field/Field.tsx

@@ -17,10 +17,12 @@ import {
   extend,
   addUnit,
   FORM_KEY,
+  numericProp,
   unknownProp,
   resetScroll,
   formatNumber,
   preventDefault,
+  makeNumericProp,
   createNamespace,
 } from '../utils';
 import {
@@ -67,7 +69,8 @@ export const fieldSharedProps = {
   rightIcon: String,
   autofocus: Boolean,
   clearable: Boolean,
-  maxlength: [Number, String],
+  maxlength: numericProp,
+  modelValue: makeNumericProp(''),
   inputAlign: String as PropType<FieldTextAlign>,
   placeholder: String,
   autocomplete: String,
@@ -88,10 +91,6 @@ export const fieldSharedProps = {
     type: String,
     default: 'clear',
   },
-  modelValue: {
-    type: [Number, String],
-    default: '',
-  },
   clearTrigger: {
     type: String as PropType<FieldClearTrigger>,
     default: 'focus',
@@ -103,10 +102,10 @@ export const fieldSharedProps = {
 };
 
 const props = extend({}, cellProps, fieldSharedProps, {
-  rows: [Number, String],
+  rows: numericProp,
   rules: Array as PropType<FieldRule[]>,
   autosize: [Boolean, Object] as PropType<boolean | FieldAutosizeConfig>,
-  labelWidth: [Number, String],
+  labelWidth: numericProp,
   labelClass: unknownProp,
   labelAlign: String as PropType<FieldTextAlign>,
   showWordLimit: Boolean,

packages/vant/src/form/Form.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
-import { truthProp, FORM_KEY, createNamespace } from '../utils';
+import { truthProp, FORM_KEY, numericProp, createNamespace } from '../utils';
 
 // Composables
 import { useChildren } from '@vant/use';
@@ -22,7 +22,7 @@ const props = {
   disabled: Boolean,
   readonly: Boolean,
   showError: Boolean,
-  labelWidth: [Number, String],
+  labelWidth: numericProp,
   labelAlign: String as PropType<FieldTextAlign>,
   inputAlign: String as PropType<FieldTextAlign>,
   scrollToError: Boolean,

packages/vant/src/grid-item/GridItem.tsx

@@ -1,7 +1,13 @@
 import { computed, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, BORDER, addUnit, extend } from '../utils';
+import {
+  BORDER,
+  extend,
+  addUnit,
+  numericProp,
+  createNamespace,
+} from '../utils';
 import { GRID_KEY } from '../grid/Grid';
 
 // Composables
@@ -21,9 +27,9 @@ export default defineComponent({
     dot: Boolean,
     text: String,
     icon: String,
-    badge: [Number, String],
+    badge: numericProp,
-    iconPrefix: String,
     iconColor: String,
+    iconPrefix: String,
   }),
 
   setup(props, { slots }) {

packages/vant/src/grid/Grid.tsx

@@ -1,5 +1,11 @@
 import { PropType, defineComponent, ExtractPropTypes, InjectionKey } from 'vue';
-import { createNamespace, addUnit, truthProp } from '../utils';
+import {
+  createNamespace,
+  addUnit,
+  truthProp,
+  numericProp,
+  makeNumericProp,
+} from '../utils';
 import { BORDER_TOP } from '../utils/constant';
 import { useChildren } from '@vant/use';
 
@@ -11,15 +17,12 @@ const props = {
   square: Boolean,
   center: truthProp,
   border: truthProp,
-  gutter: [Number, String],
+  gutter: numericProp,
   reverse: Boolean,
-  iconSize: [Number, String],
+  iconSize: numericProp,
   direction: String as PropType<GridDirection>,
   clickable: Boolean,
-  columnNum: {
+  columnNum: makeNumericProp(4),
-    type: [Number, String],
-    default: 4,
-  },
 };
 
 export type GridProvide = {

packages/vant/src/icon/Icon.tsx

@@ -1,5 +1,5 @@
 import { PropType, defineComponent, inject, computed } from 'vue';
-import { addUnit, createNamespace } from '../utils';
+import { addUnit, numericProp, createNamespace } from '../utils';
 import { Badge } from '../badge';
 import { CONFIG_PROVIDER_KEY } from '../config-provider/ConfigProvider';
 
@@ -13,8 +13,8 @@ export default defineComponent({
   props: {
     dot: Boolean,
     name: String,
-    size: [Number, String],
+    size: numericProp,
-    badge: [Number, String],
+    badge: numericProp,
     color: String,
     classPrefix: String,
     tag: {

packages/vant/src/image-preview/ImagePreview.tsx

@@ -18,6 +18,7 @@ import {
   Interceptor,
   callInterceptor,
   createNamespace,
+  makeNumericProp,
 } from '../utils';
 
 // Composables
@@ -38,6 +39,8 @@ const [name, bem] = createNamespace('image-preview');
 const props = {
   show: Boolean,
   loop: truthProp,
+  minZoom: makeNumericProp(1 / 3),
+  maxZoom: makeNumericProp(3),
   overlay: truthProp,
   closeable: Boolean,
   showIndex: truthProp,
@@ -45,28 +48,14 @@ const props = {
   transition: String,
   beforeClose: Function as PropType<Interceptor>,
   overlayStyle: Object as PropType<CSSProperties>,
+  swipeDuration: makeNumericProp(300),
+  startPosition: makeNumericProp(0),
   showIndicators: Boolean,
   closeOnPopstate: truthProp,
   images: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-  minZoom: {
-    type: [Number, String],
-    default: 1 / 3,
-  },
-  maxZoom: {
-    type: [Number, String],
-    default: 3,
-  },
-  swipeDuration: {
-    type: [Number, String],
-    default: 300,
-  },
-  startPosition: {
-    type: [Number, String],
-    default: 0,
-  },
   closeIcon: {
     type: String,
     default: 'clear',

packages/vant/src/image-preview/ImagePreviewItem.tsx

@@ -1,7 +1,7 @@
 import { watch, computed, reactive, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { clamp, preventDefault, createNamespace } from '../utils';
+import { clamp, preventDefault, numericProp, createNamespace } from '../utils';
 
 // Composables
 import { useTouch } from '../composables/use-touch';
@@ -25,11 +25,11 @@ export default defineComponent({
     show: Boolean,
     active: Number,
     minZoom: {
-      type: [Number, String],
+      type: numericProp,
       required: true,
     },
     maxZoom: {
-      type: [Number, String],
+      type: numericProp,
       required: true,
     },
     rootWidth: {

packages/vant/src/image/Image.tsx

@@ -15,6 +15,7 @@ import {
   addUnit,
   inBrowser,
   truthProp,
+  numericProp,
   createNamespace,
 } from '../utils';
 
@@ -33,11 +34,11 @@ export default defineComponent({
     alt: String,
     fit: String as PropType<ImageFit>,
     round: Boolean,
-    width: [Number, String],
+    width: numericProp,
-    height: [Number, String],
+    height: numericProp,
-    radius: [Number, String],
+    radius: numericProp,
     lazyLoad: Boolean,
-    iconSize: [Number, String],
+    iconSize: numericProp,
     showError: truthProp,
     iconPrefix: String,
     showLoading: truthProp,

packages/vant/src/index-anchor/IndexAnchor.tsx

@@ -3,6 +3,7 @@ import { ref, reactive, computed, CSSProperties, defineComponent } from 'vue';
 // Utils
 import {
   extend,
+  numericProp,
   BORDER_BOTTOM,
   getZIndexStyle,
   createNamespace,
@@ -20,7 +21,7 @@ export default defineComponent({
   name,
 
   props: {
-    index: [Number, String],
+    index: numericProp,
   },
 
   setup(props, { slots }) {

packages/vant/src/index-bar/IndexBar.tsx

@@ -18,6 +18,7 @@ import {
   isDef,
   isHidden,
   truthProp,
+  numericProp,
   getScrollTop,
   preventDefault,
   createNamespace,
@@ -51,7 +52,7 @@ const [name, bem] = createNamespace('index-bar');
 
 const props = {
   sticky: truthProp,
-  zIndex: [Number, String],
+  zIndex: numericProp,
   teleport: [String, Object] as PropType<TeleportProps['to']>,
   highlightColor: String,
   stickyOffsetTop: {

packages/vant/src/list/List.tsx

@@ -10,7 +10,12 @@ import {
 } from 'vue';
 
 // Utils
-import { isHidden, truthProp, createNamespace } from '../utils';
+import {
+  isHidden,
+  truthProp,
+  createNamespace,
+  makeNumericProp,
+} from '../utils';
 
 // Composables
 import { useRect, useScrollParent, useEventListener } from '@vant/use';
@@ -27,16 +32,13 @@ const [name, bem, t] = createNamespace('list');
 
 const props = {
   error: Boolean,
+  offset: makeNumericProp(300),
   loading: Boolean,
   finished: Boolean,
   errorText: String,
   loadingText: String,
   finishedText: String,
   immediateCheck: truthProp,
-  offset: {
-    type: [Number, String],
-    default: 300,
-  },
   direction: {
     type: String as PropType<ListDirection>,
     default: 'down',

packages/vant/src/loading/Loading.tsx

@@ -1,5 +1,11 @@
 import { computed, PropType, defineComponent } from 'vue';
-import { createNamespace, addUnit, getSizeStyle, extend } from '../utils';
+import {
+  extend,
+  addUnit,
+  numericProp,
+  getSizeStyle,
+  createNamespace,
+} from '../utils';
 
 const [name, bem] = createNamespace('loading');
 
@@ -19,10 +25,10 @@ export default defineComponent({
   name,
 
   props: {
-    size: [Number, String],
+    size: numericProp,
     color: String,
     vertical: Boolean,
-    textSize: [Number, String],
+    textSize: numericProp,
     textColor: String,
     type: {
       type: String as PropType<LoadingType>,

packages/vant/src/nav-bar/NavBar.tsx

@@ -3,6 +3,7 @@ import { ref, CSSProperties, defineComponent } from 'vue';
 // Utils
 import {
   truthProp,
+  numericProp,
   BORDER_BOTTOM,
   getZIndexStyle,
   createNamespace,
@@ -22,7 +23,7 @@ export default defineComponent({
   props: {
     title: String,
     fixed: Boolean,
-    zIndex: [Number, String],
+    zIndex: numericProp,
     border: truthProp,
     leftText: String,
     rightText: String,

packages/vant/src/notice-bar/NoticeBar.tsx

@@ -8,7 +8,7 @@ import {
 } from 'vue';
 
 // Utils
-import { isDef, createNamespace } from '../utils';
+import { isDef, createNamespace, makeNumericProp } from '../utils';
 
 // Composables
 import {
@@ -33,6 +33,8 @@ const props = {
   text: String,
   mode: String as PropType<NoticeBarMode>,
   color: String,
+  delay: makeNumericProp(1),
+  speed: makeNumericProp(60),
   leftIcon: String,
   wrapable: Boolean,
   background: String,
@@ -40,14 +42,6 @@ const props = {
     type: Boolean as PropType<boolean | null>,
     default: null,
   },
-  delay: {
-    type: [Number, String],
-    default: 1,
-  },
-  speed: {
-    type: [Number, String],
-    default: 60,
-  },
 };
 
 export type NoticeBarProps = ExtractPropTypes<typeof props>;

packages/vant/src/notify/Notify.tsx

@@ -1,5 +1,5 @@
 import { PropType, defineComponent } from 'vue';
-import { createNamespace, extend, unknownProp } from '../utils';
+import { extend, numericProp, unknownProp, createNamespace } from '../utils';
 import { Popup } from '../popup';
 import { popupSharedProps } from '../popup/shared';
 import type { NotifyType } from './types';
@@ -11,7 +11,7 @@ export default defineComponent({
 
   props: extend({}, popupSharedProps, {
     color: String,
-    message: [Number, String],
+    message: numericProp,
     className: unknownProp,
     background: String,
     lockScroll: Boolean,

packages/vant/src/number-keyboard/NumberKeyboard.tsx

@@ -13,9 +13,11 @@ import {
 // Utils
 import {
   truthProp,
+  numericProp,
   getZIndexStyle,
   stopPropagation,
   createNamespace,
+  makeNumericProp,
 } from '../utils';
 
 // Composables
@@ -41,8 +43,9 @@ export default defineComponent({
   props: {
     show: Boolean,
     title: String,
-    zIndex: [Number, String],
+    zIndex: numericProp,
     teleport: [String, Object] as PropType<TeleportProps['to']>,
+    maxlength: makeNumericProp(Number.MAX_VALUE),
     transition: truthProp,
     blurOnClose: truthProp,
     showDeleteKey: truthProp,
@@ -64,10 +67,6 @@ export default defineComponent({
       type: [String, Array] as PropType<string | string[]>,
       default: '',
     },
-    maxlength: {
-      type: [Number, String],
-      default: Number.MAX_VALUE,
-    },
   },
 
   emits: [

packages/vant/src/number-keyboard/NumberKeyboardKey.tsx

@@ -1,5 +1,5 @@
 import { ref, PropType, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { numericProp, createNamespace } from '../utils';
 import { useTouch } from '../composables/use-touch';
 import { Loading } from '../loading';
 
@@ -30,7 +30,7 @@ export default defineComponent({
 
   props: {
     type: String as PropType<KeyType>,
-    text: [Number, String],
+    text: numericProp,
     color: String,
     wider: Boolean,
     large: Boolean,

packages/vant/src/overlay/Overlay.tsx

@@ -4,6 +4,7 @@ import {
   isDef,
   extend,
   truthProp,
+  numericProp,
   unknownProp,
   preventDefault,
   createNamespace,
@@ -18,8 +19,8 @@ export default defineComponent({
 
   props: {
     show: Boolean,
-    zIndex: [Number, String],
+    zIndex: numericProp,
-    duration: [Number, String],
+    duration: numericProp,
     className: unknownProp,
     lockScroll: truthProp,
     customStyle: Object as PropType<CSSProperties>,

packages/vant/src/pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 import { computed, watch, PropType, defineComponent } from 'vue';
-import { BORDER, createNamespace } from '../utils';
+import { BORDER, makeNumericProp, createNamespace } from '../utils';
 
 const [name, bem, t] = createNamespace('pagination');
 
@@ -23,6 +23,10 @@ export default defineComponent({
   props: {
     prevText: String,
     nextText: String,
+    pageCount: makeNumericProp(0),
+    totalItems: makeNumericProp(0),
+    showPageSize: makeNumericProp(5),
+    itemsPerPage: makeNumericProp(10),
     forceEllipses: Boolean,
     mode: {
       type: String as PropType<PaginationMode>,
@@ -32,22 +36,6 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
-    pageCount: {
-      type: [Number, String],
-      default: 0,
-    },
-    totalItems: {
-      type: [Number, String],
-      default: 0,
-    },
-    itemsPerPage: {
-      type: [Number, String],
-      default: 10,
-    },
-    showPageSize: {
-      type: [Number, String],
-      default: 5,
-    },
   },
 
   emits: ['change', 'update:modelValue'],

packages/vant/src/password-input/PasswordInput.tsx

@@ -2,9 +2,11 @@ import { defineComponent } from 'vue';
 import {
   addUnit,
   truthProp,
+  numericProp,
   BORDER_LEFT,
   BORDER_SURROUND,
   createNamespace,
+  makeNumericProp,
 } from '../utils';
 
 const [name, bem] = createNamespace('password-input');
@@ -15,17 +17,14 @@ export default defineComponent({
   props: {
     info: String,
     mask: truthProp,
-    gutter: [Number, String],
+    gutter: numericProp,
+    length: makeNumericProp(6),
     focused: Boolean,
     errorInfo: String,
     value: {
       type: String,
       default: '',
     },
-    length: {
-      type: [Number, String],
-      default: 6,
-    },
   },
 
   emits: ['focus'],

packages/vant/src/picker/Picker.tsx

@@ -14,6 +14,7 @@ import {
   truthProp,
   preventDefault,
   createNamespace,
+  makeNumericProp,
   BORDER_UNSET_TOP_BOTTOM,
 } from '../utils';
 
@@ -42,21 +43,12 @@ export const pickerProps = {
   loading: Boolean,
   readonly: Boolean,
   allowHtml: Boolean,
+  itemHeight: makeNumericProp(44),
   showToolbar: truthProp,
+  swipeDuration: makeNumericProp(1000),
+  visibleItemCount: makeNumericProp(6),
   cancelButtonText: String,
   confirmButtonText: String,
-  itemHeight: {
-    type: [Number, String],
-    default: 44,
-  },
-  visibleItemCount: {
-    type: [Number, String],
-    default: 6,
-  },
-  swipeDuration: {
-    type: [Number, String],
-    default: 1000,
-  },
 };
 
 export type PickerProps = ExtractPropTypes<typeof pickerProps>;
@@ -68,15 +60,12 @@ export default defineComponent({
     // @deprecated
     // should be removed in next major version
     valueKey: String,
+    defaultIndex: makeNumericProp(0),
     columnsFieldNames: Object as PropType<PickerFieldNames>,
     columns: {
       type: Array as PropType<PickerOption[] | PickerColumn[]>,
       default: () => [],
     },
-    defaultIndex: {
-      type: [Number, String],
-      default: 0,
-    },
     toolbarPosition: {
       type: String as PropType<PickerToolbarPosition>,
       default: 'top',

packages/vant/src/picker/PickerColumn.tsx

@@ -6,6 +6,7 @@ import {
   clamp,
   isObject,
   unknownProp,
+  numericProp,
   preventDefault,
   createNamespace,
 } from '../utils';
@@ -55,11 +56,11 @@ export default defineComponent({
       required: true,
     },
     swipeDuration: {
-      type: [Number, String],
+      type: numericProp,
       required: true,
     },
     visibleItemCount: {
-      type: [Number, String],
+      type: numericProp,
       required: true,
     },
     defaultIndex: {

packages/vant/src/popover/Popover.tsx

@@ -16,6 +16,7 @@ import {
   pick,
   extend,
   truthProp,
+  numericProp,
   unknownProp,
   BORDER_BOTTOM,
   createNamespace,
@@ -72,7 +73,7 @@ export default defineComponent({
   props: {
     show: Boolean,
     overlay: Boolean,
-    duration: [Number, String],
+    duration: numericProp,
     iconPrefix: String,
     overlayClass: unknownProp,
     overlayStyle: Object as PropType<CSSProperties>,

packages/vant/src/popup/shared.ts

@@ -1,15 +1,15 @@
 import { PropType, CSSProperties, TeleportProps } from 'vue';
-import { truthProp, unknownProp, Interceptor } from '../utils';
+import { truthProp, unknownProp, Interceptor, numericProp } from '../utils';
 
 export const popupSharedProps = {
   // whether to show popup
   show: Boolean,
   // z-index
-  zIndex: [Number, String],
+  zIndex: numericProp,
   // whether to show overlay
   overlay: truthProp,
   // transition duration
-  duration: [Number, String],
+  duration: numericProp,
   // teleport
   teleport: [String, Object] as PropType<TeleportProps['to']>,
   // prevent body scroll

packages/vant/src/progress/Progress.tsx

@@ -1,5 +1,5 @@
 import { computed, defineComponent, ExtractPropTypes } from 'vue';
-import { truthProp, createNamespace, addUnit } from '../utils';
+import { addUnit, truthProp, numericProp, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('progress');
 
@@ -11,9 +11,9 @@ const props = {
   showPivot: truthProp,
   pivotColor: String,
   trackColor: String,
-  strokeWidth: [Number, String],
+  strokeWidth: numericProp,
   percentage: {
-    type: [Number, String],
+    type: numericProp,
     default: 0,
     validator: (value: number | string) => value >= 0 && value <= 100,
   },

packages/vant/src/pull-refresh/PullRefresh.tsx

@@ -1,7 +1,13 @@
 import { ref, watch, reactive, nextTick, defineComponent } from 'vue';
 
 // Utils
-import { preventDefault, getScrollTop, createNamespace } from '../utils';
+import {
+  numericProp,
+  getScrollTop,
+  preventDefault,
+  createNamespace,
+  makeNumericProp,
+} from '../utils';
 
 // Composables
 import { useScrollParent } from '@vant/use';
@@ -27,27 +33,15 @@ export default defineComponent({
 
   props: {
     disabled: Boolean,
+    modelValue: Boolean,
+    headHeight: makeNumericProp(DEFAULT_HEAD_HEIGHT),
     successText: String,
     pullingText: String,
     loosingText: String,
     loadingText: String,
-    pullDistance: [Number, String],
+    pullDistance: numericProp,
-    modelValue: {
+    successDuration: makeNumericProp(500),
-      type: Boolean,
+    animationDuration: makeNumericProp(300),
-      default: false,
-    },
-    successDuration: {
-      type: [Number, String],
-      default: 500,
-    },
-    animationDuration: {
-      type: [Number, String],
-      default: 300,
-    },
-    headHeight: {
-      type: [Number, String],
-      default: DEFAULT_HEAD_HEIGHT,
-    },
   },
 
   emits: ['refresh', 'update:modelValue'],

packages/vant/src/radio-group/RadioGroup.tsx

@@ -5,7 +5,7 @@ import {
   defineComponent,
   ExtractPropTypes,
 } from 'vue';
-import { unknownProp, createNamespace } from '../utils';
+import { unknownProp, numericProp, createNamespace } from '../utils';
 import { useChildren, useCustomFieldValue } from '@vant/use';
 import type { CheckerDirection } from '../checkbox/Checker';
 
@@ -13,7 +13,7 @@ const [name, bem] = createNamespace('radio-group');
 
 const props = {
   disabled: Boolean,
-  iconSize: [Number, String],
+  iconSize: numericProp,
   direction: String as PropType<CheckerDirection>,
   modelValue: unknownProp,
   checkedColor: String,

packages/vant/src/rate/Rate.tsx

@@ -1,7 +1,14 @@
 import { computed, defineComponent } from 'vue';
 
 // Utils
-import { addUnit, truthProp, createNamespace, preventDefault } from '../utils';
+import {
+  addUnit,
+  truthProp,
+  numericProp,
+  preventDefault,
+  createNamespace,
+  makeNumericProp,
+} from '../utils';
 
 // Composables
 import { useCustomFieldValue } from '@vant/use';
@@ -49,9 +56,10 @@ export default defineComponent({
   name,
 
   props: {
-    size: [Number, String],
+    size: numericProp,
     color: String,
-    gutter: [Number, String],
+    count: makeNumericProp(5),
+    gutter: numericProp,
     readonly: Boolean,
     disabled: Boolean,
     allowHalf: Boolean,
@@ -71,10 +79,6 @@ export default defineComponent({
       type: String,
       default: 'star-o',
     },
-    count: {
-      type: [Number, String],
-      default: 5,
-    },
   },
 
   emits: ['change', 'update:modelValue'],

packages/vant/src/row/Row.tsx

@@ -5,7 +5,7 @@ import {
   InjectionKey,
   defineComponent,
 } from 'vue';
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, makeNumericProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('row');
@@ -33,15 +33,12 @@ export default defineComponent({
   props: {
     wrap: truthProp,
     align: String as PropType<RowAlign>,
+    gutter: makeNumericProp(0),
     justify: String as PropType<RowJustify>,
     tag: {
       type: String as PropType<keyof HTMLElementTagNameMap>,
       default: 'div',
     },
-    gutter: {
-      type: [Number, String],
-      default: 0,
-    },
   },
 
   setup(props, { slots }) {

packages/vant/src/sidebar-item/SidebarItem.tsx

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, extend } from '../utils';
+import { extend, numericProp, createNamespace } from '../utils';
 import { SIDEBAR_KEY } from '../sidebar/Sidebar';
 
 // Composables
@@ -19,7 +19,7 @@ export default defineComponent({
   props: extend({}, routeProps, {
     dot: Boolean,
     title: String,
-    badge: [Number, String],
+    badge: numericProp,
     disabled: Boolean,
   }),
 

packages/vant/src/sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, InjectionKey } from 'vue';
-import { createNamespace } from '../utils';
+import { makeNumericProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('sidebar');
@@ -15,10 +15,7 @@ export default defineComponent({
   name,
 
   props: {
-    modelValue: {
+    modelValue: makeNumericProp(0),
-      type: [Number, String],
-      default: 0,
-    },
   },
 
   emits: ['change', 'update:modelValue'],

packages/vant/src/skeleton/Skeleton.tsx

@@ -1,5 +1,12 @@
 import { PropType, defineComponent } from 'vue';
-import { addUnit, truthProp, getSizeStyle, createNamespace } from '../utils';
+import {
+  addUnit,
+  truthProp,
+  numericProp,
+  getSizeStyle,
+  createNamespace,
+  makeNumericProp,
+} from '../utils';
 
 const [name, bem] = createNamespace('skeleton');
 const DEFAULT_ROW_WIDTH = '100%';
@@ -9,17 +16,14 @@ export default defineComponent({
   name,
 
   props: {
+    row: makeNumericProp(0),
     title: Boolean,
     round: Boolean,
     avatar: Boolean,
     loading: truthProp,
     animate: truthProp,
-    avatarSize: [Number, String],
+    avatarSize: numericProp,
-    titleWidth: [Number, String],
+    titleWidth: numericProp,
-    row: {
-      type: [Number, String],
-      default: 0,
-    },
     avatarShape: {
       type: String as PropType<'square' | 'round'>,
       default: 'round',

packages/vant/src/slider/Slider.tsx

@@ -5,10 +5,12 @@ import {
   clamp,
   addUnit,
   addNumber,
+  numericProp,
   getSizeStyle,
   preventDefault,
   stopPropagation,
   createNamespace,
+  makeNumericProp,
 } from '../utils';
 
 // Composables
@@ -25,27 +27,18 @@ export default defineComponent({
   name,
 
   props: {
+    min: makeNumericProp(0),
+    max: makeNumericProp(100),
+    step: makeNumericProp(1),
     range: Boolean,
     reverse: Boolean,
     disabled: Boolean,
     readonly: Boolean,
     vertical: Boolean,
-    barHeight: [Number, String],
+    barHeight: numericProp,
-    buttonSize: [Number, String],
+    buttonSize: numericProp,
     activeColor: String,
     inactiveColor: String,
-    min: {
-      type: [Number, String],
-      default: 0,
-    },
-    max: {
-      type: [Number, String],
-      default: 100,
-    },
-    step: {
-      type: [Number, String],
-      default: 1,
-    },
     modelValue: {
       type: [Number, Array] as PropType<SliderValue>,
       default: 0,

packages/vant/src/stepper/Stepper.tsx

@@ -8,11 +8,13 @@ import {
   truthProp,
   resetScroll,
   Interceptor,
+  numericProp,
   formatNumber,
   getSizeStyle,
   preventDefault,
   createNamespace,
   callInterceptor,
+  makeNumericProp,
 } from '../utils';
 
 // Composables
@@ -32,6 +34,10 @@ export default defineComponent({
   name,
 
   props: {
+    min: makeNumericProp(1),
+    max: makeNumericProp(Infinity),
+    name: makeNumericProp(''),
+    step: makeNumericProp(1),
     theme: String as PropType<StepperTheme>,
     integer: Boolean,
     disabled: Boolean,
@@ -40,35 +46,16 @@ export default defineComponent({
     showInput: truthProp,
     longPress: truthProp,
     allowEmpty: Boolean,
-    modelValue: [Number, String],
+    modelValue: numericProp,
-    inputWidth: [Number, String],
+    inputWidth: numericProp,
-    buttonSize: [Number, String],
+    buttonSize: numericProp,
     placeholder: String,
     disablePlus: Boolean,
     disableMinus: Boolean,
     disableInput: Boolean,
     beforeChange: Function as PropType<Interceptor>,
-    decimalLength: [Number, String],
+    defaultValue: makeNumericProp(1),
-    name: {
+    decimalLength: numericProp,
-      type: [Number, String],
-      default: '',
-    },
-    min: {
-      type: [Number, String],
-      default: 1,
-    },
-    max: {
-      type: [Number, String],
-      default: Infinity,
-    },
-    step: {
-      type: [Number, String],
-      default: 1,
-    },
-    defaultValue: {
-      type: [Number, String],
-      default: 1,
-    },
   },
 
   emits: [

packages/vant/src/steps/Steps.tsx

@@ -1,5 +1,5 @@
 import { PropType, defineComponent, ExtractPropTypes, InjectionKey } from 'vue';
-import { createNamespace } from '../utils';
+import { makeNumericProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('steps');
@@ -7,15 +7,12 @@ const [name, bem] = createNamespace('steps');
 export type StepsDirection = 'horizontal' | 'vertical';
 
 const props = {
+  active: makeNumericProp(0),
   iconPrefix: String,
   finishIcon: String,
   activeColor: String,
   inactiveIcon: String,
   inactiveColor: String,
-  active: {
-    type: [Number, String],
-    default: 0,
-  },
   direction: {
     type: String as PropType<StepsDirection>,
     default: 'horizontal',

packages/vant/src/sticky/Sticky.tsx

@@ -13,9 +13,11 @@ import {
   extend,
   isHidden,
   unitToPx,
+  numericProp,
   getScrollTop,
   getZIndexStyle,
   createNamespace,
+  makeNumericProp,
 } from '../utils';
 
 // Composables
@@ -30,16 +32,10 @@ export default defineComponent({
   name,
 
   props: {
-    zIndex: [Number, String],
+    zIndex: numericProp,
     container: Object as PropType<Element>,
-    offsetTop: {
+    offsetTop: makeNumericProp(0),
-      type: [Number, String],
+    offsetBottom: makeNumericProp(0),
-      default: 0,
-    },
-    offsetBottom: {
-      type: [Number, String],
-      default: 0,
-    },
     position: {
       type: String as PropType<StickyPosition>,
       default: 'top',

packages/vant/src/submit-bar/SubmitBar.tsx

@@ -1,5 +1,5 @@
 import { PropType, CSSProperties, defineComponent } from 'vue';
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, makeNumericProp, createNamespace } from '../utils';
 
 // Components
 import { Icon } from '../icon';
@@ -21,11 +21,8 @@ export default defineComponent({
     buttonText: String,
     buttonColor: String,
     suffixLabel: String,
+    decimalLength: makeNumericProp(2),
     safeAreaInsetBottom: truthProp,
-    decimalLength: {
-      type: [Number, String],
-      default: 2,
-    },
     currency: {
       type: String,
       default: '¥',

packages/vant/src/swipe-cell/SwipeCell.tsx

@@ -12,10 +12,12 @@ import {
 import {
   clamp,
   isDef,
+  numericProp,
   Interceptor,
   preventDefault,
   callInterceptor,
   createNamespace,
+  makeNumericProp,
 } from '../utils';
 
 // Composables
@@ -33,15 +35,12 @@ import type {
 const [name, bem] = createNamespace('swipe-cell');
 
 const props = {
+  name: makeNumericProp(''),
   disabled: Boolean,
-  leftWidth: [Number, String],
+  leftWidth: numericProp,
-  rightWidth: [Number, String],
+  rightWidth: numericProp,
   beforeClose: Function as PropType<Interceptor>,
   stopPropagation: Boolean,
-  name: {
-    type: [Number, String],
-    default: '',
-  },
 };
 
 export type SwipeCellProps = ExtractPropTypes<typeof props>;

packages/vant/src/swipe/Swipe.tsx

@@ -18,8 +18,10 @@ import {
   clamp,
   isHidden,
   truthProp,
+  numericProp,
   preventDefault,
   createNamespace,
+  makeNumericProp,
 } from '../utils';
 
 // Composables
@@ -40,26 +42,17 @@ const [name, bem] = createNamespace('swipe');
 
 const props = {
   loop: truthProp,
-  width: [Number, String],
+  width: numericProp,
-  height: [Number, String],
+  height: numericProp,
   vertical: Boolean,
+  autoplay: makeNumericProp(0),
+  duration: makeNumericProp(500),
   touchable: truthProp,
   lazyRender: Boolean,
+  initialSwipe: makeNumericProp(0),
   indicatorColor: String,
   showIndicators: truthProp,
   stopPropagation: truthProp,
-  autoplay: {
-    type: [Number, String],
-    default: 0,
-  },
-  duration: {
-    type: [Number, String],
-    default: 500,
-  },
-  initialSwipe: {
-    type: [Number, String],
-    default: 0,
-  },
 };
 
 export type SwipeProps = ExtractPropTypes<typeof props>;

packages/vant/src/switch/Switch.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { createNamespace, addUnit, unknownProp } from '../utils';
+import { addUnit, numericProp, unknownProp, createNamespace } from '../utils';
 import { useCustomFieldValue } from '@vant/use';
 import { Loading } from '../loading';
 
@@ -9,7 +9,7 @@ export default defineComponent({
   name,
 
   props: {
-    size: [Number, String],
+    size: numericProp,
     loading: Boolean,
     disabled: Boolean,
     modelValue: unknownProp,

packages/vant/src/tab/Tab.tsx

@@ -10,7 +10,13 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, extend, truthProp, unknownProp } from '../utils';
+import {
+  extend,
+  truthProp,
+  unknownProp,
+  numericProp,
+  createNamespace,
+} from '../utils';
 import { TABS_KEY } from '../tabs/Tabs';
 
 // Composables
@@ -28,8 +34,8 @@ export default defineComponent({
 
   props: extend({}, routeProps, {
     dot: Boolean,
-    name: [Number, String],
+    name: numericProp,
-    badge: [Number, String],
+    badge: numericProp,
     title: String,
     disabled: Boolean,
     titleClass: unknownProp,

packages/vant/src/tabbar-item/TabbarItem.tsx

@@ -1,7 +1,7 @@
 import { computed, getCurrentInstance, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, extend, isObject } from '../utils';
+import { createNamespace, extend, isObject, numericProp } from '../utils';
 import { TABBAR_KEY } from '../tabbar/Tabbar';
 
 // Composables
@@ -20,8 +20,8 @@ export default defineComponent({
   props: extend({}, routeProps, {
     dot: Boolean,
     icon: String,
-    name: [Number, String],
+    name: numericProp,
-    badge: [Number, String],
+    badge: numericProp,
     iconPrefix: String,
   }),
 

packages/vant/src/tabbar/Tabbar.tsx

@@ -10,9 +10,11 @@ import {
 import {
   truthProp,
   Interceptor,
+  numericProp,
   getZIndexStyle,
   createNamespace,
   callInterceptor,
+  makeNumericProp,
   BORDER_TOP_BOTTOM,
 } from '../utils';
 
@@ -26,15 +28,12 @@ const props = {
   route: Boolean,
   fixed: truthProp,
   border: truthProp,
-  zIndex: [Number, String],
+  zIndex: numericProp,
   placeholder: Boolean,
   activeColor: String,
   beforeChange: Function as PropType<Interceptor>,
   inactiveColor: String,
-  modelValue: {
+  modelValue: makeNumericProp(0),
-    type: [Number, String],
-    default: 0,
-  },
   safeAreaInsetBottom: {
     type: Boolean as PropType<boolean | null>,
     default: null,

packages/vant/src/tabs/Tabs.tsx

@@ -16,21 +16,23 @@ import {
 
 // Utils
 import {
+  pick,
   isDef,
   addUnit,
   isHidden,
   unitToPx,
   truthProp,
+  numericProp,
   Interceptor,
   getVisibleTop,
   getElementTop,
   callInterceptor,
   createNamespace,
+  makeNumericProp,
   getVisibleHeight,
   setRootScrollTop,
   ComponentInstance,
   BORDER_TOP_BOTTOM,
-  pick,
 } from '../utils';
 import { scrollLeftTo, scrollTopTo } from './utils';
 
@@ -61,37 +63,25 @@ const props = {
   color: String,
   border: Boolean,
   sticky: Boolean,
+  active: makeNumericProp(0),
+  duration: makeNumericProp(0.3),
   animated: Boolean,
   ellipsis: truthProp,
   swipeable: Boolean,
   scrollspy: Boolean,
+  offsetTop: makeNumericProp(0),
   background: String,
   lazyRender: truthProp,
-  lineWidth: [Number, String],
+  lineWidth: numericProp,
-  lineHeight: [Number, String],
+  lineHeight: numericProp,
   beforeChange: Function as PropType<Interceptor>,
+  swipeThreshold: makeNumericProp(5),
   titleActiveColor: String,
   titleInactiveColor: String,
   type: {
     type: String as PropType<TabsType>,
     default: 'line',
   },
-  active: {
-    type: [Number, String],
-    default: 0,
-  },
-  duration: {
-    type: [Number, String],
-    default: 0.3,
-  },
-  offsetTop: {
-    type: [Number, String],
-    default: 0,
-  },
-  swipeThreshold: {
-    type: [Number, String],
-    default: 5,
-  },
 };
 
 export type TabsProps = ExtractPropTypes<typeof props>;

packages/vant/src/tabs/TabsContent.tsx

@@ -1,5 +1,5 @@
 import { ref, watch, onMounted, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { numericProp, createNamespace } from '../utils';
 import { Swipe, SwipeInstance } from '../swipe';
 
 const [name, bem] = createNamespace('tabs');
@@ -17,7 +17,7 @@ export default defineComponent({
       required: true,
     },
     duration: {
-      type: [Number, String],
+      type: numericProp,
       required: true,
     },
     currentIndex: {

packages/vant/src/tabs/TabsTitle.tsx

@@ -1,5 +1,5 @@
 import { computed, CSSProperties, defineComponent } from 'vue';
-import { createNamespace, isDef, truthProp } from '../utils';
+import { isDef, truthProp, numericProp, createNamespace } from '../utils';
 import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('tab');
@@ -12,7 +12,7 @@ export default defineComponent({
     type: String,
     color: String,
     title: String,
-    badge: [Number, String],
+    badge: numericProp,
     isActive: Boolean,
     disabled: Boolean,
     scrollable: Boolean,

packages/vant/src/toast/Toast.tsx

@@ -8,7 +8,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, isDef, unknownProp } from '../utils';
+import { isDef, unknownProp, numericProp, createNamespace } from '../utils';
 import { lockClick } from './lock-click';
 
 // Components
@@ -28,8 +28,8 @@ export default defineComponent({
     icon: String,
     show: Boolean,
     overlay: Boolean,
-    message: [Number, String],
+    message: numericProp,
-    iconSize: [Number, String],
+    iconSize: numericProp,
     className: unknownProp,
     iconPrefix: String,
     loadingType: String as PropType<LoadingType>,

packages/vant/src/tree-select/TreeSelect.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, addUnit } from '../utils';
+import { addUnit, createNamespace, makeNumericProp } from '../utils';
 
 // Components
 import { Icon } from '../icon';
@@ -29,18 +29,13 @@ export default defineComponent({
   name,
 
   props: {
-    max: {
+    max: makeNumericProp(Infinity),
-      type: [Number, String],
+    height: makeNumericProp(300),
-      default: Infinity,
+    mainActiveIndex: makeNumericProp(0),
-    },
     items: {
       type: Array as PropType<TreeSelectItem[]>,
       default: () => [],
     },
-    height: {
-      type: [Number, String],
-      default: 300,
-    },
     activeId: {
       type: [Number, String, Array] as PropType<
         number | string | Array<number | string>
@@ -51,10 +46,6 @@ export default defineComponent({
       type: String,
       default: 'success',
     },
-    mainActiveIndex: {
-      type: [Number, String],
-      default: 0,
-    },
   },
 
   emits: [

packages/vant/src/uploader/Uploader.tsx

@@ -12,8 +12,10 @@ import {
   extend,
   isPromise,
   truthProp,
+  numericProp,
   Interceptor,
   getSizeStyle,
+  makeNumericProp,
   ComponentInstance,
 } from '../utils';
 import {
@@ -47,25 +49,23 @@ import type {
 } from './types';
 
 const props = {
+  name: makeNumericProp(''),
   capture: String,
   multiple: Boolean,
   disabled: Boolean,
   readonly: Boolean,
   lazyLoad: Boolean,
+  maxCount: makeNumericProp(Number.MAX_VALUE),
   uploadText: String,
   deletable: truthProp,
   afterRead: Function as PropType<UploaderAfterRead>,
   showUpload: truthProp,
   beforeRead: Function as PropType<UploaderBeforeRead>,
   beforeDelete: Function as PropType<Interceptor>,
-  previewSize: [Number, String],
+  previewSize: numericProp,
   previewImage: truthProp,
   previewOptions: Object as PropType<ImagePreviewOptions>,
   previewFullImage: truthProp,
-  name: {
-    type: [Number, String],
-    default: '',
-  },
   accept: {
     type: String,
     default: 'image/*',
@@ -78,10 +78,6 @@ const props = {
     type: [Number, String, Function] as PropType<UploaderMaxSize>,
     default: Number.MAX_VALUE,
   },
-  maxCount: {
-    type: [Number, String],
-    default: Number.MAX_VALUE,
-  },
   imageFit: {
     type: String as PropType<ImageFit>,
     default: 'cover',

packages/vant/src/uploader/UploaderPreviewItem.tsx

@@ -6,6 +6,7 @@ import {
   isDef,
   extend,
   Interceptor,
+  numericProp,
   getSizeStyle,
   callInterceptor,
 } from '../utils';
@@ -20,12 +21,12 @@ import type { UploaderFileListItem } from './types';
 
 export default defineComponent({
   props: {
-    name: [Number, String],
+    name: numericProp,
     index: Number,
     imageFit: String as PropType<ImageFit>,
     lazyLoad: Boolean,
     deletable: Boolean,
-    previewSize: [Number, String],
+    previewSize: numericProp,
     beforeDelete: Function as PropType<Interceptor>,
     item: {
       type: Object as PropType<UploaderFileListItem>,

packages/vant/src/utils/basic.ts

@@ -6,12 +6,18 @@ export const extend = Object.assign;
 
 export const inBrowser = typeof window !== 'undefined';
 
-// PropTypes
+// propType helpers
+// help us to write less code, reduce bundle size
 export const unknownProp = null as unknown as PropType<unknown>;
+export const numericProp = [Number, String];
 export const truthProp = {
   type: Boolean,
   default: true as const,
 };
+export const makeNumericProp = <T>(defaultVal: T) => ({
+  type: [Number, String],
+  default: defaultVal,
+});
 
 // eslint-disable-next-line
 export type ComponentInstance = ComponentPublicInstance<{}, any>;