diff --git a/src/config.json b/src/config.json
index 3391f0aace..7b6f8b8f5d 100644
--- a/src/config.json
+++ b/src/config.json
@@ -543,6 +543,7 @@
           "cName": "数字输入框",
           "type": "component",
           "show": true,
+          "setup": true,
           "desc": "数字输入框组件",
           "author": "szg2008"
         },
diff --git a/src/packages/__VUE/animate/doc.en-US.md b/src/packages/__VUE/animate/doc.en-US.md
index 00bfe8ca77..f6638fa7a4 100644
--- a/src/packages/__VUE/animate/doc.en-US.md
+++ b/src/packages/__VUE/animate/doc.en-US.md
@@ -61,7 +61,7 @@ app.use(Animate);
 | 10 | twinkle | twinkle，It is recommended that loop be true |
 | 11 | flicker | Polish button，It is recommended that loop be true |
 
-### Types 4.3.2
+### Types v4.3.2
 
 The component exports the following type definitions:
 
diff --git a/src/packages/__VUE/animate/doc.md b/src/packages/__VUE/animate/doc.md
index f783bd7bf8..7abd50869d 100644
--- a/src/packages/__VUE/animate/doc.md
+++ b/src/packages/__VUE/animate/doc.md
@@ -61,7 +61,7 @@ app.use(Animate);
 | 10 | twinkle | 水波，建议 loop 为 true |
 | 11 | flicker | 擦亮按钮，建议 loop 为 true |
 
-### 类型定义 4.3.2
+### 类型定义 v4.3.2
 
 组件导出以下类型定义：
 
diff --git a/src/packages/__VUE/animate/doc.taro.md b/src/packages/__VUE/animate/doc.taro.md
index a2c9e9fbc4..ec9e8e5b7f 100644
--- a/src/packages/__VUE/animate/doc.taro.md
+++ b/src/packages/__VUE/animate/doc.taro.md
@@ -61,7 +61,7 @@ app.use(Animate);
 | 10 | twinkle | 水波，建议 loop 为 true |
 | 11 | flicker | 擦亮按钮，建议 loop 为 true |
 
-### 类型定义 4.3.2
+### 类型定义 v4.3.2
 
 组件导出以下类型定义：
 
diff --git a/src/packages/__VUE/ecard/index.taro.vue b/src/packages/__VUE/ecard/index.taro.vue
index ff40c0e7ed..f36ae67eb0 100644
--- a/src/packages/__VUE/ecard/index.taro.vue
+++ b/src/packages/__VUE/ecard/index.taro.vue
@@ -33,7 +33,7 @@
 <script lang="ts">
 import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import NutInputNumber from '../inputnumber/index.taro.vue';
+import NutInputNumber from '../inputnumber/index.taro';
 import type { PropType } from 'vue';
 import { useLocale } from '@/packages/utils/useLocale';
 
diff --git a/src/packages/__VUE/ecard/index.vue b/src/packages/__VUE/ecard/index.vue
index 9780840e96..9a75d8f934 100644
--- a/src/packages/__VUE/ecard/index.vue
+++ b/src/packages/__VUE/ecard/index.vue
@@ -33,7 +33,7 @@
 <script lang="ts">
 import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import NutInputNumber from '../inputnumber/index.vue';
+import NutInputNumber from '../inputnumber';
 import type { PropType } from 'vue';
 import { useLocale } from '@/packages/utils/useLocale';
 
diff --git a/src/packages/__VUE/form/__tests__/index.spec.tsx b/src/packages/__VUE/form/__tests__/index.spec.tsx
index ac214f25bf..05e39d7323 100644
--- a/src/packages/__VUE/form/__tests__/index.spec.tsx
+++ b/src/packages/__VUE/form/__tests__/index.spec.tsx
@@ -7,7 +7,7 @@ import Button from '../../button';
 import Switch from '../../switch/index.vue';
 import Checkbox from '../../checkbox/index.vue';
 import Rate from '../../rate/index.vue';
-import InputNumber from '../../inputnumber/index.vue';
+import InputNumber from '../../inputnumber';
 import Range from '../../range/index.vue';
 import Uploader from '../../uploader/index.vue';
 
diff --git a/src/packages/__VUE/inputnumber/__tests__/index.spec.ts b/src/packages/__VUE/inputnumber/__tests__/index.spec.ts
index 163d5458d0..fb139f0b9a 100644
--- a/src/packages/__VUE/inputnumber/__tests__/index.spec.ts
+++ b/src/packages/__VUE/inputnumber/__tests__/index.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import InputNumber from '../index.vue';
+import InputNumber from '../';
 import { h, nextTick } from 'vue';
 import { Left, Right } from '@nutui/icons-vue';
 
diff --git a/src/packages/__VUE/inputnumber/doc.en-US.md b/src/packages/__VUE/inputnumber/doc.en-US.md
index 3d5664d002..cd26f34b46 100644
--- a/src/packages/__VUE/inputnumber/doc.en-US.md
+++ b/src/packages/__VUE/inputnumber/doc.en-US.md
@@ -92,6 +92,17 @@ Set step size `step` 0.1 `decimal places` keep 1 decimal place
 | blur | Triggered when the input box blur | `event: Event` |
 | focus | Triggered when the input box focus | `event: Event ` |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  InputNumberProps,
+  InputNumberInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/inputnumber/doc.md b/src/packages/__VUE/inputnumber/doc.md
index ac2595031e..23827131f4 100644
--- a/src/packages/__VUE/inputnumber/doc.md
+++ b/src/packages/__VUE/inputnumber/doc.md
@@ -92,6 +92,17 @@ app.use(InputNumber);
 | blur | 输入框失去焦点时触发 | `(event: Event)  ` |
 | focus | 输入框获得焦点时触发 | `(event: Event ) ` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  InputNumberProps,
+  InputNumberInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/inputnumber/doc.taro.md b/src/packages/__VUE/inputnumber/doc.taro.md
index b6ee62c52f..4f50d27598 100644
--- a/src/packages/__VUE/inputnumber/doc.taro.md
+++ b/src/packages/__VUE/inputnumber/doc.taro.md
@@ -92,6 +92,17 @@ app.use(InputNumber);
 | blur | 输入框失去焦点时触发 | `(event: Event)  ` |
 | focus | 输入框获得焦点时触发 | `(event: Event ) ` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  InputNumberProps,
+  InputNumberInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/inputnumber/index.taro.ts b/src/packages/__VUE/inputnumber/index.taro.ts
new file mode 100644
index 0000000000..35b850e5ef
--- /dev/null
+++ b/src/packages/__VUE/inputnumber/index.taro.ts
@@ -0,0 +1,11 @@
+import InputNumber from './input-number.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(InputNumber);
+
+export type { InputNumberProps } from './input-number.taro.vue';
+
+export type InputNumberInstance = ComponentPublicInstance & InstanceType<typeof InputNumber>;
+
+export { InputNumber, InputNumber as default };
diff --git a/src/packages/__VUE/inputnumber/index.taro.vue b/src/packages/__VUE/inputnumber/index.taro.vue
deleted file mode 100644
index f78dc7ba93..0000000000
--- a/src/packages/__VUE/inputnumber/index.taro.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <view :class="classes">
-    <view
-      class="nut-input-number__icon nut-input-number__left"
-      :class="{ 'nut-input-number__icon--disabled': !reduceAllow() }"
-      @click="reduce"
-    >
-      <slot name="left-icon">
-        <Minus :size="pxCheck(buttonSize)" />
-      </slot>
-    </view>
-    <view v-if="readonly" class="nut-input-number__text--readonly">
-      {{ modelValue }}
-    </view>
-    <input
-      v-else
-      class="nut-input-number__text--input"
-      type="number"
-      :min="min"
-      :max="max"
-      :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
-      :disabled="disabled"
-      :readonly="readonly"
-      :value="modelValue"
-      @input="change"
-      @blur="blur"
-      @focus="focus"
-    />
-    <view
-      class="nut-input-number__icon nut-input-number__right"
-      :class="{ 'nut-input-number__icon--disabled': !addAllow() }"
-      @click="add"
-    >
-      <slot name="right-icon">
-        <Plus :size="pxCheck(buttonSize)" />
-      </slot>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { computed, toRef, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { pxCheck } from '@/packages/utils/pxCheck';
-import { Minus, Plus } from '@nutui/icons-vue-taro';
-import { useFormDisabled } from '../form/common';
-const { componentName, create } = createComponent('input-number');
-export default create({
-  components: { Minus, Plus },
-  props: {
-    modelValue: {
-      type: [Number, String],
-      default: 0
-    },
-    inputWidth: {
-      type: [Number, String],
-      default: ''
-    },
-    buttonSize: {
-      type: [Number, String],
-      default: ''
-    },
-    min: {
-      type: [Number, String],
-      default: 1
-    },
-    max: {
-      type: [Number, String],
-      default: 9999
-    },
-    step: {
-      type: [Number, String],
-      default: 1
-    },
-    decimalPlaces: {
-      type: [Number, String],
-      default: 0
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit'],
-  setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'));
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--disabled`]: disabled.value
-      };
-    });
-    const fixedDecimalPlaces = (v: string | number): string => {
-      return Number(v).toFixed(Number(props.decimalPlaces));
-    };
-    const change = (event: Event) => {
-      const input = event.target as HTMLInputElement;
-      emit('update:modelValue', input.value, event);
-      emit('change', input.value, event);
-    };
-    const emitChange = (value: string | number, event: Event) => {
-      let output_value: number | string = fixedDecimalPlaces(value);
-      emit('update:modelValue', output_value, event);
-      if (Number(props.modelValue) !== Number(output_value)) emit('change', output_value, event);
-    };
-    const addAllow = (value = Number(props.modelValue)): boolean => {
-      return value < Number(props.max) && !disabled.value;
-    };
-    const reduceAllow = (value = Number(props.modelValue)): boolean => {
-      return value > Number(props.min) && !disabled.value;
-    };
-    const reduce = (event: Event) => {
-      if (disabled.value) return;
-      emit('reduce', event);
-      let output_value = Number(props.modelValue) - Number(props.step);
-      if (reduceAllow() && output_value >= Number(props.min)) {
-        emitChange(output_value, event);
-      } else {
-        emitChange(Number(props.min), event);
-        emit('overlimit', event, 'reduce');
-      }
-    };
-    const add = (event: Event) => {
-      if (disabled.value) return;
-      emit('add', event);
-      let output_value = Number(props.modelValue) + Number(props.step);
-      if (addAllow() && output_value <= Number(props.max)) {
-        emitChange(output_value, event);
-      } else {
-        emitChange(Number(props.max), event);
-        emit('overlimit', event, 'add');
-      }
-    };
-    const focus = (event: Event) => {
-      if (disabled.value) return;
-      if (props.readonly) {
-        blur(event);
-        return;
-      }
-      emit('focus', event);
-    };
-    const blur = (event: Event) => {
-      if (disabled.value) return;
-      if (props.readonly) return;
-      const input = event.target as HTMLInputElement;
-      let value = Number(input.value);
-      if (value < Number(props.min)) {
-        value = Number(props.min);
-      } else if (value > Number(props.max)) {
-        value = Number(props.max);
-      }
-      emitChange(value, event);
-      emit('blur', event);
-    };
-    const format = (val: string | number) => {
-      let value = Number(val);
-      if (value < Number(props.min)) {
-        value = Number(props.min);
-      } else if (value > Number(props.max)) {
-        value = Number(props.max);
-      }
-      return value;
-    };
-    watch(
-      () => [props.max, props.min],
-      () => {
-        if (Number(props.min) > Number(props.max)) {
-          console.warn('[NutUI] <InputNumber>', 'props.max < props.min');
-        }
-        const value = format(props.modelValue);
-        if (value !== Number(props.modelValue)) {
-          emitChange(value, {} as Event);
-        }
-      }
-    );
-
-    return {
-      classes,
-      disabled,
-      change,
-      blur,
-      focus,
-      add,
-      addAllow,
-      reduce,
-      reduceAllow,
-      pxCheck
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/inputnumber/index.ts b/src/packages/__VUE/inputnumber/index.ts
new file mode 100644
index 0000000000..57dd125f79
--- /dev/null
+++ b/src/packages/__VUE/inputnumber/index.ts
@@ -0,0 +1,11 @@
+import InputNumber from './input-number.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(InputNumber);
+
+export type { InputNumberProps } from './input-number.vue';
+
+export type InputNumberInstance = ComponentPublicInstance & InstanceType<typeof InputNumber>;
+
+export { InputNumber, InputNumber as default };
diff --git a/src/packages/__VUE/inputnumber/index.vue b/src/packages/__VUE/inputnumber/index.vue
deleted file mode 100644
index 3606b7908a..0000000000
--- a/src/packages/__VUE/inputnumber/index.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-  <view :class="classes">
-    <view
-      class="nut-input-number__icon nut-input-number__left"
-      :class="{ 'nut-input-number__icon--disabled': !reduceAllow() }"
-      @click="reduce"
-    >
-      <slot name="left-icon">
-        <Minus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
-      </slot>
-    </view>
-    <input
-      type="number"
-      :min="min"
-      :max="max"
-      :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
-      :disabled="disabled"
-      :readonly="readonly"
-      :value="modelValue"
-      @input="change"
-      @blur="blur"
-      @focus="focus"
-    />
-    <view
-      class="nut-input-number__icon nut-input-number__right"
-      :class="{ 'nut-input-number__icon--disabled': !addAllow() }"
-      @click="add"
-    >
-      <slot name="right-icon">
-        <Plus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
-      </slot>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { computed, toRef, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { pxCheck } from '@/packages/utils/pxCheck';
-import { Minus, Plus } from '@nutui/icons-vue';
-import { useFormDisabled } from '../form/common';
-const { componentName, create } = createComponent('input-number');
-export default create({
-  components: { Minus, Plus },
-  props: {
-    modelValue: {
-      type: [Number, String],
-      default: 0
-    },
-    inputWidth: {
-      type: [Number, String],
-      default: ''
-    },
-    buttonSize: {
-      type: [Number, String],
-      default: ''
-    },
-    min: {
-      type: [Number, String],
-      default: 1
-    },
-    max: {
-      type: [Number, String],
-      default: 9999
-    },
-    step: {
-      type: [Number, String],
-      default: 1
-    },
-    decimalPlaces: {
-      type: [Number, String],
-      default: 0
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit'],
-  setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'));
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--disabled`]: disabled.value
-      };
-    });
-    const fixedDecimalPlaces = (v: string | number): string => {
-      return Number(v).toFixed(Number(props.decimalPlaces));
-    };
-    const change = (event: Event) => {
-      const input = event.target as HTMLInputElement;
-      emit('update:modelValue', input.value, event);
-      emit('change', input.value, event);
-    };
-    const emitChange = (value: string | number, event: Event) => {
-      let output_value: number | string = fixedDecimalPlaces(value);
-      emit('update:modelValue', output_value, event);
-      if (Number(props.modelValue) !== Number(output_value)) emit('change', output_value, event);
-    };
-    const addAllow = (value = Number(props.modelValue)): boolean => {
-      return value < Number(props.max) && !disabled.value;
-    };
-    const reduceAllow = (value = Number(props.modelValue)): boolean => {
-      return value > Number(props.min) && !disabled.value;
-    };
-    const reduce = (event: Event) => {
-      if (disabled.value) return;
-      emit('reduce', event);
-      let output_value = Number(props.modelValue) - Number(props.step);
-      if (reduceAllow() && output_value >= Number(props.min)) {
-        emitChange(output_value, event);
-      } else {
-        emitChange(Number(props.min), event);
-        emit('overlimit', event, 'reduce');
-      }
-    };
-    const add = (event: Event) => {
-      if (disabled.value) return;
-      emit('add', event);
-      let output_value = Number(props.modelValue) + Number(props.step);
-      if (addAllow() && output_value <= Number(props.max)) {
-        emitChange(output_value, event);
-      } else {
-        emitChange(Number(props.max), event);
-        emit('overlimit', event, 'add');
-      }
-    };
-    const focus = (event: Event) => {
-      if (disabled.value) return;
-      if (props.readonly) return;
-      emit('focus', event);
-    };
-    const blur = (event: Event) => {
-      if (disabled.value) return;
-      if (props.readonly) return;
-      const input = event.target as HTMLInputElement;
-      let value = input.valueAsNumber;
-      if (value < Number(props.min)) {
-        value = Number(props.min);
-      } else if (value > Number(props.max)) {
-        value = Number(props.max);
-      }
-      emitChange(value, event);
-      emit('blur', event);
-    };
-    const format = (val: string | number) => {
-      let value = Number(val);
-      if (value < Number(props.min)) {
-        value = Number(props.min);
-      } else if (value > Number(props.max)) {
-        value = Number(props.max);
-      }
-      return value;
-    };
-    watch(
-      () => [props.max, props.min],
-      () => {
-        if (Number(props.min) > Number(props.max)) {
-          console.warn('[NutUI] <InputNumber>', 'props.max < props.min');
-        }
-        const value = format(props.modelValue);
-        if (value !== Number(props.modelValue)) {
-          emitChange(value, {} as Event);
-        }
-      }
-    );
-
-    return {
-      classes,
-      disabled,
-      change,
-      blur,
-      focus,
-      add,
-      addAllow,
-      reduce,
-      reduceAllow,
-      pxCheck
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/inputnumber/input-number.taro.vue b/src/packages/__VUE/inputnumber/input-number.taro.vue
new file mode 100644
index 0000000000..416fd59256
--- /dev/null
+++ b/src/packages/__VUE/inputnumber/input-number.taro.vue
@@ -0,0 +1,164 @@
+<template>
+  <view :class="classes">
+    <view
+      class="nut-input-number__icon nut-input-number__left"
+      :class="{ 'nut-input-number__icon--disabled': !reduceAllow() }"
+      @click="reduce"
+    >
+      <slot name="left-icon">
+        <Minus :size="pxCheck(buttonSize)" />
+      </slot>
+    </view>
+    <view v-if="readonly" class="nut-input-number__text--readonly">
+      {{ modelValue }}
+    </view>
+    <input
+      v-else
+      class="nut-input-number__text--input"
+      type="number"
+      :min="min"
+      :max="max"
+      :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="modelValue"
+      @input="change"
+      @blur="blur"
+      @focus="focus"
+    />
+    <view
+      class="nut-input-number__icon nut-input-number__right"
+      :class="{ 'nut-input-number__icon--disabled': !addAllow() }"
+      @click="add"
+    >
+      <slot name="right-icon">
+        <Plus :size="pxCheck(buttonSize)" />
+      </slot>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed, toRef, watch } from 'vue';
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { Minus, Plus } from '@nutui/icons-vue-taro';
+import { useFormDisabled } from '../form/common';
+
+defineOptions({
+  name: 'NutInputNumber'
+});
+
+export type InputNumberProps = Partial<{
+  modelValue: string | number;
+  inputWidth: string | number;
+  buttonSize: string | number;
+  min: string | number;
+  max: string | number;
+  step: string | number;
+  decimalPlaces: string | number;
+  disabled: boolean;
+  readonly: boolean;
+}>;
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  modelValue: 0,
+  inputWidth: '',
+  buttonSize: '',
+  min: 1,
+  max: 9999,
+  step: 1,
+  decimalPlaces: 0,
+  disabled: false,
+  readonly: false
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit']);
+
+const disabled = useFormDisabled(toRef(props, 'disabled'));
+const classes = computed(() => {
+  const prefixCls = 'nut-input-number';
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--disabled`]: disabled.value
+  };
+});
+const fixedDecimalPlaces = (v: string | number): string => {
+  return Number(v).toFixed(Number(props.decimalPlaces));
+};
+const change = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  emit('update:modelValue', input.value, event);
+  emit('change', input.value, event);
+};
+const emitChange = (value: string | number, event: Event) => {
+  let output_value: number | string = fixedDecimalPlaces(value);
+  emit('update:modelValue', output_value, event);
+  if (Number(props.modelValue) !== Number(output_value)) emit('change', output_value, event);
+};
+const addAllow = (value = Number(props.modelValue)): boolean => {
+  return value < Number(props.max) && !disabled.value;
+};
+const reduceAllow = (value = Number(props.modelValue)): boolean => {
+  return value > Number(props.min) && !disabled.value;
+};
+const reduce = (event: Event) => {
+  if (disabled.value) return;
+  emit('reduce', event);
+  let output_value = Number(props.modelValue) - Number(props.step);
+  if (reduceAllow() && output_value >= Number(props.min)) {
+    emitChange(output_value, event);
+  } else {
+    emitChange(Number(props.min), event);
+    emit('overlimit', event, 'reduce');
+  }
+};
+const add = (event: Event) => {
+  if (disabled.value) return;
+  emit('add', event);
+  let output_value = Number(props.modelValue) + Number(props.step);
+  if (addAllow() && output_value <= Number(props.max)) {
+    emitChange(output_value, event);
+  } else {
+    emitChange(Number(props.max), event);
+    emit('overlimit', event, 'add');
+  }
+};
+const focus = (event: Event) => {
+  if (disabled.value) return;
+  if (props.readonly) return;
+  emit('focus', event);
+};
+const blur = (event: Event) => {
+  if (disabled.value) return;
+  if (props.readonly) return;
+  const input = event.target as HTMLInputElement;
+  let value = Number(input.value);
+  if (value < Number(props.min)) {
+    value = Number(props.min);
+  } else if (value > Number(props.max)) {
+    value = Number(props.max);
+  }
+  emitChange(value, event);
+  emit('blur', event);
+};
+const format = (val: string | number) => {
+  let value = Number(val);
+  if (value < Number(props.min)) {
+    value = Number(props.min);
+  } else if (value > Number(props.max)) {
+    value = Number(props.max);
+  }
+  return value;
+};
+watch(
+  () => [props.max, props.min],
+  () => {
+    if (Number(props.min) > Number(props.max)) {
+      console.warn('[NutUI] <InputNumber>', 'props.max < props.min');
+    }
+    const value = format(props.modelValue);
+    if (value !== Number(props.modelValue)) {
+      emitChange(value, {} as Event);
+    }
+  }
+);
+</script>
diff --git a/src/packages/__VUE/inputnumber/input-number.vue b/src/packages/__VUE/inputnumber/input-number.vue
new file mode 100644
index 0000000000..9f017b9a57
--- /dev/null
+++ b/src/packages/__VUE/inputnumber/input-number.vue
@@ -0,0 +1,159 @@
+<template>
+  <view :class="classes">
+    <view
+      class="nut-input-number__icon nut-input-number__left"
+      :class="{ 'nut-input-number__icon--disabled': !reduceAllow() }"
+      @click="reduce"
+    >
+      <slot name="left-icon">
+        <Minus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+      </slot>
+    </view>
+    <input
+      type="number"
+      :min="min"
+      :max="max"
+      :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="modelValue"
+      @input="change"
+      @blur="blur"
+      @focus="focus"
+    />
+    <view
+      class="nut-input-number__icon nut-input-number__right"
+      :class="{ 'nut-input-number__icon--disabled': !addAllow() }"
+      @click="add"
+    >
+      <slot name="right-icon">
+        <Plus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+      </slot>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed, toRef, watch } from 'vue';
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { Minus, Plus } from '@nutui/icons-vue';
+import { useFormDisabled } from '../form/common';
+
+defineOptions({
+  name: 'NutInputNumber'
+});
+
+export type InputNumberProps = Partial<{
+  modelValue: string | number;
+  inputWidth: string | number;
+  buttonSize: string | number;
+  min: string | number;
+  max: string | number;
+  step: string | number;
+  decimalPlaces: string | number;
+  disabled: boolean;
+  readonly: boolean;
+}>;
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  modelValue: 0,
+  inputWidth: '',
+  buttonSize: '',
+  min: 1,
+  max: 9999,
+  step: 1,
+  decimalPlaces: 0,
+  disabled: false,
+  readonly: false
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit']);
+
+const disabled = useFormDisabled(toRef(props, 'disabled'));
+const classes = computed(() => {
+  const prefixCls = 'nut-input-number';
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--disabled`]: disabled.value
+  };
+});
+const fixedDecimalPlaces = (v: string | number): string => {
+  return Number(v).toFixed(Number(props.decimalPlaces));
+};
+const change = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  emit('update:modelValue', input.value, event);
+  emit('change', input.value, event);
+};
+const emitChange = (value: string | number, event: Event) => {
+  let output_value: number | string = fixedDecimalPlaces(value);
+  emit('update:modelValue', output_value, event);
+  if (Number(props.modelValue) !== Number(output_value)) emit('change', output_value, event);
+};
+const addAllow = (value = Number(props.modelValue)): boolean => {
+  return value < Number(props.max) && !disabled.value;
+};
+const reduceAllow = (value = Number(props.modelValue)): boolean => {
+  return value > Number(props.min) && !disabled.value;
+};
+const reduce = (event: Event) => {
+  if (disabled.value) return;
+  emit('reduce', event);
+  let output_value = Number(props.modelValue) - Number(props.step);
+  if (reduceAllow() && output_value >= Number(props.min)) {
+    emitChange(output_value, event);
+  } else {
+    emitChange(Number(props.min), event);
+    emit('overlimit', event, 'reduce');
+  }
+};
+const add = (event: Event) => {
+  if (disabled.value) return;
+  emit('add', event);
+  let output_value = Number(props.modelValue) + Number(props.step);
+  if (addAllow() && output_value <= Number(props.max)) {
+    emitChange(output_value, event);
+  } else {
+    emitChange(Number(props.max), event);
+    emit('overlimit', event, 'add');
+  }
+};
+const focus = (event: Event) => {
+  if (disabled.value) return;
+  if (props.readonly) return;
+  emit('focus', event);
+};
+const blur = (event: Event) => {
+  if (disabled.value) return;
+  if (props.readonly) return;
+  const input = event.target as HTMLInputElement;
+  let value = Number(input.value);
+  if (value < Number(props.min)) {
+    value = Number(props.min);
+  } else if (value > Number(props.max)) {
+    value = Number(props.max);
+  }
+  emitChange(value, event);
+  emit('blur', event);
+};
+const format = (val: string | number) => {
+  let value = Number(val);
+  if (value < Number(props.min)) {
+    value = Number(props.min);
+  } else if (value > Number(props.max)) {
+    value = Number(props.max);
+  }
+  return value;
+};
+watch(
+  () => [props.max, props.min],
+  () => {
+    if (Number(props.min) > Number(props.max)) {
+      console.warn('[NutUI] <InputNumber>', 'props.max < props.min');
+    }
+    const value = format(props.modelValue);
+    if (value !== Number(props.modelValue)) {
+      emitChange(value, {} as Event);
+    }
+  }
+);
+</script>
diff --git a/src/packages/__VUE/layout/doc.en-US.md b/src/packages/__VUE/layout/doc.en-US.md
index 6eb9e857ec..9fef106177 100644
--- a/src/packages/__VUE/layout/doc.en-US.md
+++ b/src/packages/__VUE/layout/doc.en-US.md
@@ -60,7 +60,7 @@ The Layout component provides a 24-column grid, by adding the span attribute on
 | --- | --- | --- |
 | click | Triggered when clicked | `event: MouseEvent` |
 
-### Types 4.3.2
+### Types v4.3.2
 
 The component exports the following type definitions:
 
diff --git a/src/packages/__VUE/layout/doc.md b/src/packages/__VUE/layout/doc.md
index f05b86ceec..579d71affa 100644
--- a/src/packages/__VUE/layout/doc.md
+++ b/src/packages/__VUE/layout/doc.md
@@ -60,7 +60,7 @@ Layout 组件提供 24 列栅格，通过在 Col 上添加 span 属性设置列
 | --- | --- | --- |
 | click | 点击时触发 | `event: MouseEvent` |
 
-### 类型定义 4.3.2
+### 类型定义 v4.3.2
 
 组件导出以下类型定义：
 
diff --git a/src/packages/__VUE/layout/doc.taro.md b/src/packages/__VUE/layout/doc.taro.md
index c028ce52e3..fd6aa0acd1 100644
--- a/src/packages/__VUE/layout/doc.taro.md
+++ b/src/packages/__VUE/layout/doc.taro.md
@@ -60,7 +60,7 @@ Layout 组件提供 24 列栅格，通过在 Col 上添加 span 属性设置列
 | --- | --- | --- |
 | click | 点击时触发 | `event: MouseEvent` |
 
-### 类型定义 4.3.2
+### 类型定义 v4.3.2
 
 组件导出以下类型定义：
 
diff --git a/src/packages/__VUE/price/doc.en-US.md b/src/packages/__VUE/price/doc.en-US.md
index 042c24b944..6c9874767e 100644
--- a/src/packages/__VUE/price/doc.en-US.md
+++ b/src/packages/__VUE/price/doc.en-US.md
@@ -63,7 +63,7 @@ size: `small`, `normal`, `large`
 | size | Size，`small`、`normal`、`large` | string | `normal` |
 | strike-through`v4.0.3` | strike-through | Boolean | false |
 
-### Types 4.3.2
+### Types v4.3.2
 
 The component exports the following type definitions:
 
diff --git a/src/packages/__VUE/price/doc.md b/src/packages/__VUE/price/doc.md
index eb53d336dd..bab02bf1d6 100644
--- a/src/packages/__VUE/price/doc.md
+++ b/src/packages/__VUE/price/doc.md
@@ -63,7 +63,7 @@ app.use(Price);
 | size | 价格尺寸，`small`、`normal`、`large` | string | `normal` |
 | strike-through`v4.0.3` | 是否展示划线价 | Boolean | false |
 
-### 类型定义 4.3.2
+### 类型定义 v4.3.2
 
 组件导出以下类型定义：
 
diff --git a/src/packages/__VUE/price/doc.taro.md b/src/packages/__VUE/price/doc.taro.md
index 8b6b5bf80e..ef833fa253 100644
--- a/src/packages/__VUE/price/doc.taro.md
+++ b/src/packages/__VUE/price/doc.taro.md
@@ -63,7 +63,7 @@ app.use(Price);
 | size | 价格尺寸，`small`、`normal`、`large` | string | `normal` |
 | strike-through`v4.0.3` | 是否展示划线价 | Boolean | false |
 
-### 类型定义 4.3.2
+### 类型定义 v4.3.2
 
 组件导出以下类型定义：
 
diff --git a/src/packages/__VUE/sku/components/SkuStepper.taro.vue b/src/packages/__VUE/sku/components/SkuStepper.taro.vue
index 069ef4992f..69503393cf 100644
--- a/src/packages/__VUE/sku/components/SkuStepper.taro.vue
+++ b/src/packages/__VUE/sku/components/SkuStepper.taro.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { ref, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import NutInputNumber from '../../inputnumber/index.taro.vue';
+import NutInputNumber from '../../inputnumber/index.taro';
 const { create } = createComponent('sku-stepper');
 
 export default create({
diff --git a/src/packages/__VUE/sku/components/SkuStepper.vue b/src/packages/__VUE/sku/components/SkuStepper.vue
index 299788f76e..1f35ad93c6 100644
--- a/src/packages/__VUE/sku/components/SkuStepper.vue
+++ b/src/packages/__VUE/sku/components/SkuStepper.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { ref, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import NutInputNumber from '../../inputnumber/index.vue';
+import NutInputNumber from '../../inputnumber';
 const { create } = createComponent('sku-stepper');
 
 export default create({