From 0bb8afaa0c779948cf0ed5bf1a629565fc725c51 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Fri, 27 Oct 2023 15:23:51 +0800
Subject: [PATCH] docs: update 4.2.0 info (#2600)

---
 .../pages/space/index.config.ts               |   0
 .../{basic => layout}/pages/space/index.vue   |   0
 src/config.json                               |  22 +-
 src/packages/__VUE/avatarcropper/doc.en-US.md |   2 +-
 src/packages/__VUE/avatarcropper/doc.md       |   2 +-
 src/packages/__VUE/avatarcropper/doc.taro.md  |   2 +-
 src/packages/__VUE/collapse/doc.en-US.md      |  12 +-
 src/packages/__VUE/collapse/doc.md            |  12 +-
 src/packages/__VUE/collapse/doc.taro.md       |  12 +-
 src/packages/__VUE/input/doc.en-US.md         | 332 ++++++----------
 src/packages/__VUE/input/doc.md               | 335 ++++++-----------
 src/packages/__VUE/input/doc.taro.md          | 354 +++++++-----------
 src/packages/__VUE/space/doc.en-US.md         |  18 +-
 src/packages/__VUE/space/doc.md               |  18 +-
 src/packages/__VUE/space/doc.taro.md          |  20 +-
 15 files changed, 433 insertions(+), 708 deletions(-)
 rename packages/nutui-taro-demo/src/{basic => layout}/pages/space/index.config.ts (100%)
 rename packages/nutui-taro-demo/src/{basic => layout}/pages/space/index.vue (100%)

diff --git a/packages/nutui-taro-demo/src/basic/pages/space/index.config.ts b/packages/nutui-taro-demo/src/layout/pages/space/index.config.ts
similarity index 100%
rename from packages/nutui-taro-demo/src/basic/pages/space/index.config.ts
rename to packages/nutui-taro-demo/src/layout/pages/space/index.config.ts
diff --git a/packages/nutui-taro-demo/src/basic/pages/space/index.vue b/packages/nutui-taro-demo/src/layout/pages/space/index.vue
similarity index 100%
rename from packages/nutui-taro-demo/src/basic/pages/space/index.vue
rename to packages/nutui-taro-demo/src/layout/pages/space/index.vue
diff --git a/src/config.json b/src/config.json
index 3bf7d2ffa3..49972068b5 100644
--- a/src/config.json
+++ b/src/config.json
@@ -163,17 +163,6 @@
           "tarodoc": true,
           "type": "component",
           "author": "yangxiaolu"
-        },
-        {
-          "version": "1.0.0",
-          "name": "Space",
-          "cName": "间距",
-          "desc": "设置元素之间的间距。",
-          "show": true,
-          "taro": true,
-          "tarodoc": true,
-          "type": "component",
-          "author": "Marvin"
         }
       ]
     },
@@ -262,6 +251,17 @@
           "exportEmpty": true,
           "exportEmptyTaro": true,
           "author": "haiweilian"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Space",
+          "cName": "间距",
+          "desc": "设置元素之间的间距。",
+          "show": true,
+          "taro": true,
+          "tarodoc": true,
+          "type": "component",
+          "author": "Marvin"
         }
       ]
     },
diff --git a/src/packages/__VUE/avatarcropper/doc.en-US.md b/src/packages/__VUE/avatarcropper/doc.en-US.md
index 849493ced5..dde4c22af3 100644
--- a/src/packages/__VUE/avatarcropper/doc.en-US.md
+++ b/src/packages/__VUE/avatarcropper/doc.en-US.md
@@ -2,7 +2,7 @@
 
 ### introduce
 
-Used to cut the profile picture to create a new image.
+Used to cut the profile picture to create a new image. Available in `NutUI` >= 4.2.0.
 
 ### install
 
diff --git a/src/packages/__VUE/avatarcropper/doc.md b/src/packages/__VUE/avatarcropper/doc.md
index 72d11c587c..1a89f1a107 100644
--- a/src/packages/__VUE/avatarcropper/doc.md
+++ b/src/packages/__VUE/avatarcropper/doc.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-用来对头像进行剪切生成一张新的图片。
+用来对头像进行剪切生成一张新的图片。在 `NutUI` >= 4.2.0 版本中提供。
 
 ### 安装
 
diff --git a/src/packages/__VUE/avatarcropper/doc.taro.md b/src/packages/__VUE/avatarcropper/doc.taro.md
index 59611620e9..275b3a3eac 100644
--- a/src/packages/__VUE/avatarcropper/doc.taro.md
+++ b/src/packages/__VUE/avatarcropper/doc.taro.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-用来对头像进行剪切生成一张新的图片。
+用来对头像进行剪切生成一张新的图片。在 `NutUI` >= 4.2.0 版本中提供。
 
 ### 安装
 
diff --git a/src/packages/__VUE/collapse/doc.en-US.md b/src/packages/__VUE/collapse/doc.en-US.md
index fc418dfe2b..0738349131 100644
--- a/src/packages/__VUE/collapse/doc.en-US.md
+++ b/src/packages/__VUE/collapse/doc.en-US.md
@@ -207,12 +207,12 @@ Set content through slot: extra
 
 ### CollapseItem Slots
 
-| Name  | Description                                    |
-| ----- | ---------------------------------------------- |
-| title | Content slot on the left side of the title bar |
-| alue  | Right content slot of the title bar            |
-| extra | Set fixed content under the title (no folding) |
-| icon  | Set a custom icon                              |
+| Name        | Description                                    |
+| ----------- | ---------------------------------------------- |
+| title       | Content slot on the left side of the title bar |
+| alue        | Right content slot of the title bar            |
+| extra       | Set fixed content under the title (no folding) |
+| icon`4.2.0` | Set a custom icon                              |
 
 ### Events
 
diff --git a/src/packages/__VUE/collapse/doc.md b/src/packages/__VUE/collapse/doc.md
index d97cc7f353..996ad7874a 100644
--- a/src/packages/__VUE/collapse/doc.md
+++ b/src/packages/__VUE/collapse/doc.md
@@ -201,12 +201,12 @@ app.use(CollapseItem);
 
 ### CollapseItem Slots
 
-| 名称  | 说明                         |
-| ----- | ---------------------------- |
-| title | 标题栏左侧内容插槽           |
-| value | 标题栏右侧内容插槽           |
-| extra | 设置标题下固定内容（不折叠） |
-| icon  | 设置自定义图标               |
+| 名称        | 说明                         |
+| ----------- | ---------------------------- |
+| title       | 标题栏左侧内容插槽           |
+| value       | 标题栏右侧内容插槽           |
+| extra       | 设置标题下固定内容（不折叠） |
+| icon`4.2.0` | 设置自定义图标               |
 
 ### Events
 
diff --git a/src/packages/__VUE/collapse/doc.taro.md b/src/packages/__VUE/collapse/doc.taro.md
index 81056139b5..9fbb3343d0 100644
--- a/src/packages/__VUE/collapse/doc.taro.md
+++ b/src/packages/__VUE/collapse/doc.taro.md
@@ -201,12 +201,12 @@ app.use(CollapseItem);
 
 ### CollapseItem Slots
 
-| 名称  | 说明                         |
-| ----- | ---------------------------- |
-| title | 标题栏左侧内容插槽           |
-| value | 标题栏右侧内容插槽           |
-| extra | 设置标题下固定内容（不折叠） |
-| icon  | 设置自定义图标               |
+| 名称        | 说明                         |
+| ----------- | ---------------------------- |
+| title       | 标题栏左侧内容插槽           |
+| value       | 标题栏右侧内容插槽           |
+| extra       | 设置标题下固定内容（不折叠） |
+| icon`4.2.0` | 设置自定义图标               |
 
 ### Events
 
diff --git a/src/packages/__VUE/input/doc.en-US.md b/src/packages/__VUE/input/doc.en-US.md
index bd1944ed26..b92603f298 100644
--- a/src/packages/__VUE/input/doc.en-US.md
+++ b/src/packages/__VUE/input/doc.en-US.md
@@ -6,7 +6,7 @@ The user can enter content in the text box.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Input } from '@nutui/nutui';
 
@@ -20,22 +20,13 @@ The value of field is bound with `v-model`.
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.text" placeholder="Text" />
+  <nut-input v-model="val" placeholder="Text" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        text: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
 </script>
 ```
 
@@ -47,28 +38,21 @@ Use `type` prop to custom different type fields.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input placeholder="Text" v-model="state.text" />
   <nut-input placeholder="Password" v-model="state.password" type="password" />
   <nut-input placeholder="Number" v-model="state.number" type="number" />
   <nut-input placeholder="Digit" v-model="state.digit" type="digit" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        text: '',
-        password: '',
-        number: '',
-        digit: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  text: '',
+  password: '',
+  number: '',
+  digit: ''
+});
 </script>
 ```
 
@@ -80,24 +64,17 @@ Use `readonly` to set the input box to read-only status, and use `disabled` to s
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input placeholder="Readonly" v-model="state.readonly" readonly />
   <nut-input placeholder="Disabled" v-model="state.disabled" disabled />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        readonly: '',
-        disabled: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  readonly: '',
+  disabled: ''
+});
 </script>
 ```
 
@@ -109,7 +86,7 @@ Display the clear icon during input by setting 'clearable'. The clear button wil
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input v-model="state.clear" placeholder="Show Clear Icon" clearable clearSize="14" />
   <nut-input
@@ -126,27 +103,16 @@ Display the clear icon during input by setting 'clearable'. The clear button wil
     </template>
   </nut-input>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { Close } from '@nutui/icons-vue';
-  export default {
-    components: {
-      Close
-    },
-    setup() {
-      const state = reactive({
-        clear: '',
-        clear2: ''
-      });
-      const clearValue = () => {
-        state.clear2 = '';
-      };
-      return {
-        state,
-        clearValue
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Close } from '@nutui/icons-vue';
+const state = reactive({
+  clear: '',
+  clear2: ''
+});
+const clearValue = () => {
+  state.clear2 = '';
+};
 </script>
 ```
 
@@ -158,7 +124,7 @@ Use in combination with `nut-form` and `nut-form-item`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form :model-value="state">
     <nut-form-item label="Text" label-align="center">
@@ -166,18 +132,11 @@ Use in combination with `nut-form` and `nut-form-item`
     </nut-form-item>
   </nut-form>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        val1: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  val1: ''
+});
 </script>
 ```
 
@@ -189,26 +148,18 @@ Use `formatter` prop to format the input value.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input v-model="state.format1" placeholder="Format On Change" :formatter="formatter" format-trigger="onChange" />
   <nut-input v-model="state.format2" placeholder="Format On Blur" :formatter="formatter" format-trigger="onBlur" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        format1: '',
-        format2: ''
-      });
-      const formatter = (value: string) => value.replace(/\d/g, '');
-      return {
-        state,
-        formatter
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  format1: '',
+  format2: ''
+});
+const formatter = (value) => value.replace(/\d/g, '');
 </script>
 ```
 
@@ -220,22 +171,13 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input v-model="state.text" type="text" show-word-limit rows="2" max-length="50" placeholder="Message" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        text: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
 </script>
 ```
 
@@ -245,24 +187,17 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.noBorder1" :border="false" placeholder="No Border" />
-  <nut-input v-model="state.noBorder2" :border="false" placeholder="No Border" />
+  <nut-input v-model="state.val1" :border="false" placeholder="No Border" />
+  <nut-input v-model="state.val2" :border="false" placeholder="No Border" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        noBorder1: '',
-        noBorder2: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  val1: '',
+  val2: ''
+});
 </script>
 ```
 
@@ -272,34 +207,20 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.event" clearable placeholder="Event" @clear="clear" @click-input="clickInput" />
+  <nut-input v-model="val" clearable placeholder="Event" @clear="clear" @click-input="clickInput" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  export default {
-    setup() {
-      const state = reactive({
-        event: ''
-      });
-      const clear = (event: Event) => {
-        showToast.text('clear');
-        console.log('clear:', event);
-      };
-      const clickInput = (event: Event) => {
-        showToast.text('clickInput');
-        console.log('clickInput:', event);
-      };
-
-      return {
-        state,
-        clear,
-        clickInput
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const val = ref('');
+const clear = () => {
+  showToast.text('clear');
+};
+const clickInput = () => {
+  showToast.text('clickInput');
+};
 </script>
 ```
 
@@ -309,30 +230,17 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.slotValue" placeholder="Slots Demo" clearable>
+  <nut-input v-model="val" placeholder="Slots Demo" clearable>
     <template #left> <Ask></Ask> </template>
     <template #right> <nut-button type="primary" size="small">Verification Code</nut-button> </template>
   </nut-input>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { Ask } from '@nutui/icons-vue';
-
-  export default {
-    components: {
-      Ask
-    },
-    setup() {
-      const state = reactive({
-        slotValue: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Ask } from '@nutui/icons-vue';
+const val = ref('');
 </script>
 ```
 
@@ -342,53 +250,53 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 
 ### Props
 
-| Attribute             | Description                                                                                                                                 | Type                      | Default    |
-| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ---------- |
-| v-model               | Input value, two-way binding                                                                                                                | string                    | -          |
-| type                  | Input type, support all native types and `number` `digit` type                                                                              | string                    | `text`     |
-| placeholder           | Placeholder when the input box is empty                                                                                                     | string                    | -          |
-| input-align           | Input align, eg `left`、`center`、`right`                                                                                                   | string                    | `left`     |
-| required              | Whether to show required mark                                                                                                               | boolean                   | `false`    |
-| border                | Whether to show inner borde                                                                                                                 | boolean                   | `true`     |
-| disabled              | Whether to disable field                                                                                                                    | boolean                   | `false`    |
-| readonly              | Whether to be readonly                                                                                                                      | boolean                   | `false`    |
-| autofocus             | Whether to auto focus, unsupported in iOS                                                                                                   | boolean                   | `false`    |
-| max-length            | Max length of value                                                                                                                         | string ｜ number          | -          |
-| clearable             | Whether to be clearable                                                                                                                     | boolean                   | `false`    |
-| showClearIcon `4.0.2` | Whether to continue to display the clear button after losing focus, which will take effect when 'clearable' is set                          | boolean                   | `false`    |
-| clear-size            | Clear Icon `font-size`                                                                                                                      | string                    | `14`       |
-| show-word-limit       | Whether to show word limit, need to set the `max-length` prop                                                                               | boolean                   | `false`    |
-| error                 | Whether to mark the input content in red                                                                                                    | boolean                   | `false`    |
-| formatter             | Input value formatter                                                                                                                       | `(val: string) => string` | -          |
-| format-trigger        | When to format value, eg `onChange`、`onBlur`                                                                                               | string                    | `onChange` |
-| confirm-type          | The text of the button in the lower right corner of the keyboard, only valid when `type='text'`, eg `send`, `search`, `next`, ` go`, `done` | string                    | `done`     |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Input value, two-way binding | string | - |
+| type | Input type, support all native types and `number` `digit` type | string | `text` |
+| placeholder | Placeholder when the input box is empty | string | - |
+| input-align | Input align, eg `left`、`center`、`right` | string | `left` |
+| required | Whether to show required mark | boolean | `false` |
+| border | Whether to show inner borde | boolean | `true` |
+| disabled | Whether to disable field | boolean | `false` |
+| readonly | Whether to be readonly | boolean | `false` |
+| autofocus | Whether to auto focus, unsupported in iOS | boolean | `false` |
+| max-length | Max length of value | string ｜ number | - |
+| clearable | Whether to be clearable | boolean | `false` |
+| showClearIcon `4.0.2` | Whether to continue to display the clear button after losing focus, which will take effect when 'clearable' is set | boolean | `false` |
+| clear-size | Clear Icon `font-size` | string | `14` |
+| show-word-limit | Whether to show word limit, need to set the `max-length` prop | boolean | `false` |
+| error | Whether to mark the input content in red | boolean | `false` |
+| formatter | Input value formatter | `(val: string) => string` | - |
+| format-trigger | When to format value, eg `onChange`、`onBlur` | string | `onChange` |
+| confirm-type | The text of the button in the lower right corner of the keyboard, only valid when `type='text'`, eg `send`, `search`, `next`, ` go`, `done` | string | `done` |
 
 ### Events
 
-| Event              | Description                            | Arguments |
-| ------------------ | -------------------------------------- | --------- |
-| update:model-value | Emitted when input value changed       | `val`     |
-| focus              | Emitted when input is focused          | `event`   |
-| blur               | Emitted when input is blurred          | `event`   |
-| clear              | Emitted when the clear icon is clicked | `event`   |
-| click              | Emitted when component is clicked      | `event`   |
-| click-input        | Emitted when the input is clicked      | `event`   |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| update:model-value | Emitted when input value changed | `val` |
+| focus | Emitted when input is focused | `event` |
+| blur | Emitted when input is blurred | `event` |
+| clear | Emitted when the clear icon is clicked | `event` |
+| click | Emitted when component is clicked | `event` |
+| click-input | Emitted when the input is clicked | `event` |
 
 ### Slots
 
-| Name          | Description                                                   |
-| ------------- | ------------------------------------------------------------- |
-| clear         | Customize the end of the input box to clear the button        |
-| left `4.0.1`  | Customize the slot content on the left side of the input box  |
+| Name | Description |
+| --- | --- |
+| clear | Customize the end of the input box to clear the button |
+| left `4.0.1` | Customize the slot content on the left side of the input box |
 | right `4.0.1` | Customize the slot content on the right side of the input box |
 
 ### Ref
 
-| Name           | Description |
-| -------------- | ----------- |
-| focus `4.0.6`  | Focus       |
-| blur `4.0.6`   | Blur        |
-| select `4.0.6` | Selct       |
+| Name | Description |
+| --- | --- |
+| focus `4.0.6` | Focus |
+| blur `4.0.6` | Blur |
+| select `4.0.6` | Selct |
 
 ## Theming
 
@@ -396,9 +304,9 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                       | Default Value               |
-| -------------------------- | --------------------------- |
-| --nut-input-border-bottom  | _#eaf0fb_                   |
-| --nut-input-disabled-color | _#c8c9cc_                   |
+| Name | Default Value |
+| --- | --- |
+| --nut-input-border-bottom | _#eaf0fb_ |
+| --nut-input-disabled-color | _#c8c9cc_ |
 | --nut-input-required-color | _var(--nut-required-color)_ |
-| --nut-input-font-size      | _var(--nut-font-size-2)_    |
+| --nut-input-font-size | _var(--nut-font-size-2)_ |
diff --git a/src/packages/__VUE/input/doc.md b/src/packages/__VUE/input/doc.md
index 2d14dc006b..865d5a71e5 100644
--- a/src/packages/__VUE/input/doc.md
+++ b/src/packages/__VUE/input/doc.md
@@ -6,13 +6,12 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
-import { Input, Button } from '@nutui/nutui';
+import { Input } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Input);
-app.use(Button);
 ```
 
 ### 基础用法
@@ -21,22 +20,13 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.text" placeholder="请输入文本" />
+  <nut-input v-model="val" placeholder="请输入文本" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        text: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
 </script>
 ```
 
@@ -48,28 +38,21 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input placeholder="请输入文本" v-model="state.text" />
   <nut-input placeholder="请输入密码" v-model="state.password" type="password" />
-  <nut-input placeholder="请输入数字" v-model="state.number" type="number" />
+  <nut-input placeholder="请输入数字（支持小数）" v-model="state.number" type="number" />
   <nut-input placeholder="请输入整数" v-model="state.digit" type="digit" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        text: '',
-        password: '',
-        number: '',
-        digit: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  text: '',
+  password: '',
+  number: '',
+  digit: ''
+});
 </script>
 ```
 
@@ -81,24 +64,17 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input placeholder="输入框只读" v-model="state.readonly" readonly />
   <nut-input placeholder="输入框已禁用" v-model="state.disabled" disabled />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        readonly: '',
-        disabled: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  readonly: '',
+  disabled: ''
+});
 </script>
 ```
 
@@ -110,7 +86,7 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input v-model="state.clear" placeholder="显示清除图标" clearable clearSize="14" />
   <nut-input
@@ -127,27 +103,16 @@ app.use(Button);
     </template>
   </nut-input>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { Close } from '@nutui/icons-vue';
-  export default {
-    components: {
-      Close
-    },
-    setup() {
-      const state = reactive({
-        clear: '',
-        clear2: ''
-      });
-      const clearValue = () => {
-        state.clear2 = '';
-      };
-      return {
-        state,
-        clearValue
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Close } from '@nutui/icons-vue';
+const state = reactive({
+  clear: '',
+  clear2: ''
+});
+const clearValue = () => {
+  state.clear2 = '';
+};
 </script>
 ```
 
@@ -159,7 +124,7 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form :model-value="state">
     <nut-form-item label="文本" label-align="center">
@@ -167,18 +132,11 @@ app.use(Button);
     </nut-form-item>
   </nut-form>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        val1: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  val1: ''
+});
 </script>
 ```
 
@@ -190,7 +148,7 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input
     v-model="state.format1"
@@ -200,21 +158,13 @@ app.use(Button);
   />
   <nut-input v-model="state.format2" placeholder="在失焦时执行格式化" :formatter="formatter" format-trigger="onBlur" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        format1: '',
-        format2: ''
-      });
-      const formatter = (value: string) => value.replace(/\d/g, '');
-      return {
-        state,
-        formatter
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  format1: '',
+  format2: ''
+});
+const formatter = (value) => value.replace(/\d/g, '');
 </script>
 ```
 
@@ -226,22 +176,13 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.text" type="text" show-word-limit rows="2" max-length="50" placeholder="请输入留言" />
+  <nut-input v-model="val" type="text" show-word-limit rows="2" max-length="50" placeholder="请输入留言" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        text: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
 </script>
 ```
 
@@ -253,24 +194,17 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.noBorder1" :border="false" placeholder="输入框无边框" />
-  <nut-input v-model="state.noBorder2" :border="false" placeholder="输入框无边框" />
+  <nut-input v-model="state.val1" :border="false" placeholder="输入框无边框" />
+  <nut-input v-model="state.val2" :border="false" placeholder="输入框无边框" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        noBorder1: '',
-        noBorder2: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  val1: '',
+  val2: ''
+});
 </script>
 ```
 
@@ -280,34 +214,20 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.event" clearable placeholder="事件演示" @clear="clear" @click-input="clickInput" />
+  <nut-input v-model="val" clearable placeholder="事件演示" @clear="clear" @click-input="clickInput" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  export default {
-    setup() {
-      const state = reactive({
-        event: ''
-      });
-      const clear = (event: Event) => {
-        showToast.text('clear');
-        console.log('clear:', event);
-      };
-      const clickInput = (event: Event) => {
-        showToast.text('clickInput');
-        console.log('clickInput:', event);
-      };
-
-      return {
-        state,
-        clear,
-        clickInput
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const val = ref('');
+const clear = () => {
+  showToast.text('clear');
+};
+const clickInput = () => {
+  showToast.text('clickInput');
+};
 </script>
 ```
 
@@ -317,30 +237,17 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.slotValue" placeholder="插槽演示" clearable>
+  <nut-input v-model="val" placeholder="插槽演示" clearable>
     <template #left> <Ask></Ask> </template>
     <template #right> <nut-button type="primary" size="small">获取验证码</nut-button> </template>
   </nut-input>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { Ask } from '@nutui/icons-vue';
-
-  export default {
-    components: {
-      Ask
-    },
-    setup() {
-      const state = reactive({
-        slotValue: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Ask } from '@nutui/icons-vue';
+const val = ref('');
 </script>
 ```
 
@@ -350,51 +257,51 @@ app.use(Button);
 
 ### Props
 
-| 参数                  | 说明                                                                                                                        | 类型                      | 默认值     |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ---------- |
-| v-model               | 输入值，双向绑定                                                                                                            | string                    | -          |
-| type                  | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `number` `digit`                                            | string                    | `text`     |
-| placeholder           | 输入框为空时占位符                                                                                                          | string                    | -          |
-| input-align           | 输入框内容对齐方式，可选值 `left`、`center`、`right`                                                                        | string                    | `left`     |
-| border                | 是否显示下边框                                                                                                              | boolean                   | `true`     |
-| disabled              | 是否禁用                                                                                                                    | boolean                   | `false`    |
-| readonly              | 是否只读                                                                                                                    | boolean                   | `false`    |
-| autofocus             | 是否自动获得焦点，`iOS` 系统不支持该属性                                                                                    | boolean                   | `false`    |
-| max-length            | 限制最长输入字符                                                                                                            | string ｜ number          | -          |
-| clearable             | 展示清除 `Icon`                                                                                                             | boolean                   | `false`    |
-| showClearIcon `4.0.2` | 是否在失去焦点后，继续展示清除按钮，在设置 `clearable` 时生效                                                               | boolean                   | `false`    |
-| clear-size            | 清除图标的 `font-size` 大小                                                                                                 | string                    | `14`       |
-| show-word-limit       | 是否显示限制最长输入字符，需要设置 `max-length` 属性                                                                        | boolean                   | `false`    |
-| error                 | 是否标红                                                                                                                    | boolean                   | `false`    |
-| formatter             | 输入内容格式化函数                                                                                                          | `(val: string) => string` | -          |
-| format-trigger        | 格式化函数触发的时机，可选值为 `onChange`、`onBlur`                                                                         | string                    | `onChange` |
-| confirm-type          | 键盘右下角按钮的文字，仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string                    | `done`     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 输入值，双向绑定 | string | - |
+| type | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `number` `digit` | string | `text` |
+| placeholder | 输入框为空时占位符 | string | - |
+| input-align | 输入框内容对齐方式，可选值 `left`、`center`、`right` | string | `left` |
+| border | 是否显示下边框 | boolean | `true` |
+| disabled | 是否禁用 | boolean | `false` |
+| readonly | 是否只读 | boolean | `false` |
+| autofocus | 是否自动获得焦点，`iOS` 系统不支持该属性 | boolean | `false` |
+| max-length | 限制最长输入字符 | string ｜ number | - |
+| clearable | 展示清除 `Icon` | boolean | `false` |
+| showClearIcon `4.0.2` | 是否在失去焦点后，继续展示清除按钮，在设置 `clearable` 时生效 | boolean | `false` |
+| clear-size | 清除图标的 `font-size` 大小 | string | `14` |
+| show-word-limit | 是否显示限制最长输入字符，需要设置 `max-length` 属性 | boolean | `false` |
+| error | 是否标红 | boolean | `false` |
+| formatter | 输入内容格式化函数 | `(val: string) => string` | - |
+| format-trigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | string | `onChange` |
+| confirm-type | 键盘右下角按钮的文字，仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string | `done` |
 
 ### Events
 
-| 事件名             | 说明                 | 回调参数 |
-| ------------------ | -------------------- | -------- |
-| update:model-value | 输入框内容变化时触发 | `val`    |
-| focus              | 输入框聚焦时触发     | `event`  |
-| blur               | 输入框失焦时触发     | `event`  |
-| clear              | 点击清除按钮时触发   | `event`  |
-| click              | 点击组件时触发       | `event`  |
-| click-input        | 点击输入区域时触发   | `event`  |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| update:model-value | 输入框内容变化时触发 | `val` |
+| focus | 输入框聚焦时触发 | `event` |
+| blur | 输入框失焦时触发 | `event` |
+| clear | 点击清除按钮时触发 | `event` |
+| click | 点击组件时触发 | `event` |
+| click-input | 点击输入区域时触发 | `event` |
 
 ### Slots
 
-| 名称          | 说明                     |
-| ------------- | ------------------------ |
-| clear         | 自定义输入框尾部清除按钮 |
-| left `4.0.1`  | 自定义输入框左侧插槽内容 |
+| 名称 | 说明 |
+| --- | --- |
+| clear | 自定义输入框尾部清除按钮 |
+| left `4.0.1` | 自定义输入框左侧插槽内容 |
 | right `4.0.1` | 自定义输入框右侧插槽内容 |
 
 ### Ref
 
-| 名称           | 说明     |
-| -------------- | -------- |
-| focus `4.0.6`  | 获取焦点 |
-| blur `4.0.6`   | 失去焦点 |
+| 名称 | 说明 |
+| --- | --- |
+| focus `4.0.6` | 获取焦点 |
+| blur `4.0.6` | 失去焦点 |
 | select `4.0.6` | 选择文字 |
 
 ## 主题定制
@@ -403,9 +310,9 @@ app.use(Button);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                       | 默认值                      |
-| -------------------------- | --------------------------- |
-| --nut-input-border-bottom  | _#eaf0fb_                   |
-| --nut-input-disabled-color | _#c8c9cc_                   |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-input-border-bottom | _#eaf0fb_ |
+| --nut-input-disabled-color | _#c8c9cc_ |
 | --nut-input-required-color | _var(--nut-required-color)_ |
-| --nut-input-font-size      | _var(--nut-font-size-2)_    |
+| --nut-input-font-size | _var(--nut-font-size-2)_ |
diff --git a/src/packages/__VUE/input/doc.taro.md b/src/packages/__VUE/input/doc.taro.md
index 3813a484f8..6d3d9efd86 100644
--- a/src/packages/__VUE/input/doc.taro.md
+++ b/src/packages/__VUE/input/doc.taro.md
@@ -6,13 +6,12 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
-import { Input, Button } from '@nutui/nutui-taro';
+import { Input } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Input);
-app.use(Button);
 ```
 
 ### 基础用法
@@ -21,22 +20,13 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.text" placeholder="请输入文本" />
+  <nut-input v-model="val" placeholder="请输入文本" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        text: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
 </script>
 ```
 
@@ -46,30 +36,27 @@ app.use(Button);
 
 根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
 
+> NutUI < 4.2.0 时，number 类型为小数，digit 类型为整数。
+>
+> NutUI >= 4.2.0 时，调整为与小程序原生 input 的类型字段保持一致（如下示例），同时支持调用原生整数键盘、带小数点键盘。
+
 :::demo
 
-```html
+```vue
 <template>
   <nut-input placeholder="请输入文本" v-model="state.text" />
   <nut-input placeholder="请输入密码" v-model="state.password" type="password" />
-  <nut-input placeholder="请输入数字" v-model="state.number" type="number" />
-  <nut-input placeholder="请输入整数" v-model="state.digit" type="digit" />
+  <nut-input placeholder="请输入数字（支持小数）" v-model="state.digit" type="digit" />
+  <nut-input placeholder="请输入整数" v-model="state.number" type="number" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        text: '',
-        password: '',
-        number: '',
-        digit: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  text: '',
+  password: '',
+  number: '',
+  digit: ''
+});
 </script>
 ```
 
@@ -81,24 +68,17 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input placeholder="输入框只读" v-model="state.readonly" readonly />
   <nut-input placeholder="输入框已禁用" v-model="state.disabled" disabled />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        readonly: '',
-        disabled: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  readonly: '',
+  disabled: ''
+});
 </script>
 ```
 
@@ -110,7 +90,7 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input v-model="state.clear" placeholder="显示清除图标" clearable clearSize="14" />
   <nut-input
@@ -127,28 +107,16 @@ app.use(Button);
     </template>
   </nut-input>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { Close } from '@nutui/icons-vue-taro';
-
-  export default {
-    components: {
-      Close
-    },
-    setup() {
-      const state = reactive({
-        clear: '',
-        clear2: ''
-      });
-      const clearValue = () => {
-        state.clear2 = '';
-      };
-      return {
-        state,
-        clearValue
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Close } from '@nutui/icons-vue-taro';
+const state = reactive({
+  clear: '',
+  clear2: ''
+});
+const clearValue = () => {
+  state.clear2 = '';
+};
 </script>
 ```
 
@@ -160,7 +128,7 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form :model-value="state">
     <nut-form-item label="文本" label-align="center">
@@ -168,18 +136,11 @@ app.use(Button);
     </nut-form-item>
   </nut-form>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        val1: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  val1: ''
+});
 </script>
 ```
 
@@ -191,7 +152,7 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input
     v-model="state.format1"
@@ -201,21 +162,13 @@ app.use(Button);
   />
   <nut-input v-model="state.format2" placeholder="在失焦时执行格式化" :formatter="formatter" format-trigger="onBlur" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        format1: '',
-        format2: ''
-      });
-      const formatter = (value: string) => value.replace(/\d/g, '');
-      return {
-        state,
-        formatter
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  format1: '',
+  format2: ''
+});
+const formatter = (value) => value.replace(/\d/g, '');
 </script>
 ```
 
@@ -227,22 +180,13 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.text" type="text" show-word-limit rows="2" max-length="50" placeholder="请输入留言" />
+  <nut-input v-model="val" type="text" show-word-limit rows="2" max-length="50" placeholder="请输入留言" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        text: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
 </script>
 ```
 
@@ -254,24 +198,17 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.noBorder1" :border="false" placeholder="输入框无边框" />
-  <nut-input v-model="state.noBorder2" :border="false" placeholder="输入框无边框" />
+  <nut-input v-model="state.val1" :border="false" placeholder="输入框无边框" />
+  <nut-input v-model="state.val2" :border="false" placeholder="输入框无边框" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        noBorder1: '',
-        noBorder2: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  val1: '',
+  val2: ''
+});
 </script>
 ```
 
@@ -281,43 +218,29 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.event" clearable placeholder="事件演示" @clear="clear" @click-input="clickInput" />
+  <nut-input v-model="state.val" clearable placeholder="事件演示" @clear="clear" @click-input="clickInput" />
   <nut-toast :msg="state.msg" v-model:visible="state.show" type="text" />
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { Toast } from '@nutui/nutui-taro';
-  export default {
-    components: {
-      Toast
-    },
-    setup() {
-      const state = reactive({
-        event: '',
-        show: false,
-        msg: ''
-      });
-      const clear = (value: string | number, event: Event) => {
-        console.log('clear:', value, event);
-        showToast('clear');
-      };
-      const showToast = (msg: string) => {
-        state.show = true;
-        state.msg = msg;
-      };
-      const clickInput = (value: string | number) => {
-        console.log('clickInput:', value);
-        showToast('clickInput');
-      };
-      return {
-        state,
-        clear,
-        clickInput
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui-taro';
+const state = reactive({
+  val: '',
+  show: false,
+  msg: ''
+});
+const showToast = (msg) => {
+  state.show = true;
+  state.msg = msg;
+};
+const clear = () => {
+  showToast('clear');
+};
+const clickInput = () => {
+  showToast('clickInput');
+};
 </script>
 ```
 
@@ -327,30 +250,17 @@ app.use(Button);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-input v-model="state.slotValue" placeholder="插槽演示" clearable>
+  <nut-input v-model="val" placeholder="插槽演示" clearable>
     <template #left> <Ask></Ask> </template>
     <template #right> <nut-button type="primary" size="small">获取验证码</nut-button> </template>
   </nut-input>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { Ask } from '@nutui/icons-vue-taro';
-
-  export default {
-    components: {
-      Ask
-    },
-    setup() {
-      const state = reactive({
-        slotValue: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Ask } from '@nutui/icons-vue-taro';
+const val = ref('');
 </script>
 ```
 
@@ -360,45 +270,45 @@ app.use(Button);
 
 ### Props
 
-| 参数                  | 说明                                                                                                                        | 类型                      | 默认值     |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ---------- |
-| v-model               | 输入值，双向绑定                                                                                                            | string                    | -          |
-| type                  | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `number` `digit`                                            | string                    | `text`     |
-| placeholder           | 输入框为空时占位符                                                                                                          | string                    | -          |
-| input-align           | 输入框内容对齐方式，可选值 `left`、`center`、`right`                                                                        | string                    | `left`     |
-| border                | 是否显示下边框                                                                                                              | boolean                   | `true`     |
-| disabled              | 是否禁用                                                                                                                    | boolean                   | `false`    |
-| readonly              | 是否只读                                                                                                                    | boolean                   | `false`    |
-| autofocus             | 是否自动获得焦点，`iOS` 系统不支持该属性                                                                                    | boolean                   | `false`    |
-| max-length            | 限制最长输入字符                                                                                                            | string ｜ number          | -          |
-| clearable             | 展示清除 `Icon`                                                                                                             | boolean                   | `false`    |
-| showClearIcon `4.0.2` | 是否在失去焦点后，继续展示清除按钮，在设置 `clearable` 时生效                                                               | boolean                   | `false`    |
-| clear-size            | 清除图标的 `font-size` 大小                                                                                                 | string                    | `14`       |
-| show-word-limit       | 是否显示限制最长输入字符，需要设置 `max-length` 属性                                                                        | boolean                   | `false`    |
-| error                 | 是否标红                                                                                                                    | boolean                   | `false`    |
-| formatter             | 输入内容格式化函数                                                                                                          | `(val: string) => string` | -          |
-| format-trigger        | 格式化函数触发的时机，可选值为 `onChange`、`onBlur`                                                                         | string                    | `onChange` |
-| confirm-type          | 键盘右下角按钮的文字，仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string                    | `done`     |
-| adjust-position       | 键盘弹起时，是否自动上推页面                                                                                                | boolean                   | `true`     |
-| always-system         | 是否强制使用系统键盘和 `Web-view` 创建的 `input` 元素。为 `true` 时，`confirm-type`、`confirm-hold` 可能失效                | boolean                   | `false`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 输入值，双向绑定 | string | - |
+| type | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `number` `digit` | string | `text` |
+| placeholder | 输入框为空时占位符 | string | - |
+| input-align | 输入框内容对齐方式，可选值 `left`、`center`、`right` | string | `left` |
+| border | 是否显示下边框 | boolean | `true` |
+| disabled | 是否禁用 | boolean | `false` |
+| readonly | 是否只读 | boolean | `false` |
+| autofocus | 是否自动获得焦点，`iOS` 系统不支持该属性 | boolean | `false` |
+| max-length | 限制最长输入字符 | string ｜ number | - |
+| clearable | 展示清除 `Icon` | boolean | `false` |
+| showClearIcon `4.0.2` | 是否在失去焦点后，继续展示清除按钮，在设置 `clearable` 时生效 | boolean | `false` |
+| clear-size | 清除图标的 `font-size` 大小 | string | `14` |
+| show-word-limit | 是否显示限制最长输入字符，需要设置 `max-length` 属性 | boolean | `false` |
+| error | 是否标红 | boolean | `false` |
+| formatter | 输入内容格式化函数 | `(val: string) => string` | - |
+| format-trigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | string | `onChange` |
+| confirm-type | 键盘右下角按钮的文字，仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string | `done` |
+| adjust-position | 键盘弹起时，是否自动上推页面 | boolean | `true` |
+| always-system | 是否强制使用系统键盘和 `Web-view` 创建的 `input` 元素。为 `true` 时，`confirm-type`、`confirm-hold` 可能失效 | boolean | `false` |
 
 ### Events
 
-| 事件名             | 说明                 | 回调参数 |
-| ------------------ | -------------------- | -------- |
-| update:model-value | 输入框内容变化时触发 | `val`    |
-| focus              | 输入框聚焦时触发     | `event`  |
-| blur               | 输入框失焦时触发     | `event`  |
-| clear              | 点击清除按钮时触发   | `event`  |
-| click              | 点击组件时触发       | `event`  |
-| click-input        | 点击输入区域时触发   | `event`  |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| update:model-value | 输入框内容变化时触发 | `val` |
+| focus | 输入框聚焦时触发 | `event` |
+| blur | 输入框失焦时触发 | `event` |
+| clear | 点击清除按钮时触发 | `event` |
+| click | 点击组件时触发 | `event` |
+| click-input | 点击输入区域时触发 | `event` |
 
 ### Slots
 
-| 名称          | 说明                     |
-| ------------- | ------------------------ |
-| clear         | 自定义输入框尾部清除按钮 |
-| left `4.0.1`  | 自定义输入框左侧插槽内容 |
+| 名称 | 说明 |
+| --- | --- |
+| clear | 自定义输入框尾部清除按钮 |
+| left `4.0.1` | 自定义输入框左侧插槽内容 |
 | right `4.0.1` | 自定义输入框右侧插槽内容 |
 
 ## 主题定制
@@ -407,9 +317,9 @@ app.use(Button);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                       | 默认值                      |
-| -------------------------- | --------------------------- |
-| --nut-input-border-bottom  | _#eaf0fb_                   |
-| --nut-input-disabled-color | _#c8c9cc_                   |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-input-border-bottom | _#eaf0fb_ |
+| --nut-input-disabled-color | _#c8c9cc_ |
 | --nut-input-required-color | _var(--nut-required-color)_ |
-| --nut-input-font-size      | _var(--nut-font-size-2)_    |
+| --nut-input-font-size | _var(--nut-font-size-2)_ |
diff --git a/src/packages/__VUE/space/doc.en-US.md b/src/packages/__VUE/space/doc.en-US.md
index b7f1816cd3..e5b860882b 100644
--- a/src/packages/__VUE/space/doc.en-US.md
+++ b/src/packages/__VUE/space/doc.en-US.md
@@ -2,7 +2,7 @@
 
 ### Intro
 
-Sets the spacing between elements.
+Sets the spacing between elements. Available in `NutUI` >= 4.2.0.
 
 ### Install
 
@@ -107,14 +107,14 @@ In horizontal mode, the wrap property controls whether child elements are wrappe
 
 ### Props
 
-| Property  | Description                                                                                                                         | Type                                                                | Default    |
-| --------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |
-| direction | Spacing direction                                                                                                                   | ` vertical \|   horizontal`                                         | horizontal |
-| align     | Cross axis alignment                                                                                                                | `start \| end \|center \| baseline`                                 | `-`        |
-| justify   | Spindle alignment                                                                                                                   | `start  \| end \| center \| between \| around \| evenly \| stretch` | `-`        |
-| wrap      | Whether to wrap lines automatically. This parameter is valid only when horizontal                                                   | `boolean / false`                                                   | `-`        |
-| fill      | Whether to make Space a block-level element and fill the entire parent element                                                      | `boolean / false`                                                   | `-`        |
-| gutter    | Spacing size, such as 20px 2em, the default unit is px, and supports array form to set horizontal and vertical spacing respectively | `number \| string \| number[] \| string[]`                          | `-`        |
+| Property  | Description                                                                                                                         | Type                                     | Default      |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------ |
+| direction | Spacing direction, `vertical` `horizontal`                                                                                          | string                                   | `horizontal` |
+| align     | Cross axis alignment, `start` `end` `center` `baseline`                                                                             | string                                   | `-`          |
+| justify   | Spindle alignment, `start` `end` `center` `between` `around` `evenly` `stretch`                                                     | string                                   | `-`          |
+| wrap      | Whether to wrap lines automatically. This parameter is valid only when horizontal                                                   | boolean                                  | `false`      |
+| fill      | Whether to make Space a block-level element and fill the entire parent element                                                      | boolean                                  | `false`      |
+| gutter    | Spacing size, such as 20px 2em, the default unit is px, and supports array form to set horizontal and vertical spacing respectively | number \| string \| number[] \| string[] | `-`          |
 
 ### Slots
 
diff --git a/src/packages/__VUE/space/doc.md b/src/packages/__VUE/space/doc.md
index 7001ca7cd2..bf2421a831 100644
--- a/src/packages/__VUE/space/doc.md
+++ b/src/packages/__VUE/space/doc.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-设置元素之间的间距。
+设置元素之间的间距。在 `NutUI` >= 4.2.0 版本中提供。
 
 ### 安装
 
@@ -107,14 +107,14 @@ Space 组件会在各个子组件之间设置一定的间距，默认间距为 8
 
 ### Props
 
-| 属性      | 说明                                                                       | 类型                                                                | 默认值     |
-| --------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |
-| direction | 间距方向                                                                   | ` vertical \|   horizontal`                                         | horizontal |
-| align     | 交叉轴对齐方式                                                             | `start \| end \|center \| baseline`                                 | `-`        |
-| justify   | 主轴对齐方式                                                               | `start  \| end \| center \| between \| around \| evenly \| stretch` | `-`        |
-| wrap      | 是否自动换行，仅在 horizontal 时有效                                       | `boolean / false`                                                   | `-`        |
-| fill      | 是否让 Space 变为一个块级元素，填充整个父元素                              | `boolean / false`                                                   | `-`        |
-| gutter    | 间距大小，如 20px 2em，默认单位为 px，支持数组形式来分别设置横向和纵向间距 | `number \| string \| number[] \| string[]`                          | `-`        |
+| 属性      | 说明                                                                              | 类型                                     | 默认值       |
+| --------- | --------------------------------------------------------------------------------- | ---------------------------------------- | ------------ |
+| direction | 间距方向，可选值 `vertical` `horizontal`                                          | string                                   | `horizontal` |
+| align     | 交叉轴对齐方式，可选值 `start` `end` `center` `baseline`                          | string                                   | `-`          |
+| justify   | 主轴对齐方式，可选值 `start` `end` `center` `between` `around` `evenly` `stretch` | string                                   | `-`          |
+| wrap      | 是否自动换行，仅在 horizontal 时有效                                              | boolean                                  | `false`      |
+| fill      | 是否让 Space 变为一个块级元素，填充整个父元素                                     | boolean                                  | `false`      |
+| gutter    | 间距大小，如 20px 2em，默认单位为 px，支持数组形式来分别设置横向和纵向间距        | number \| string \| number[] \| string[] | `-`          |
 
 ### Slots
 
diff --git a/src/packages/__VUE/space/doc.taro.md b/src/packages/__VUE/space/doc.taro.md
index 7001ca7cd2..5ff252c2db 100644
--- a/src/packages/__VUE/space/doc.taro.md
+++ b/src/packages/__VUE/space/doc.taro.md
@@ -2,13 +2,13 @@
 
 ### 介绍
 
-设置元素之间的间距。
+设置元素之间的间距。在 `NutUI` >= 4.2.0 版本中提供。
 
 ### 安装
 
 ```javascript
 import { createApp } from 'vue';
-import { Space } from '@nutui/nutui';
+import { Space } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Space);
@@ -107,14 +107,14 @@ Space 组件会在各个子组件之间设置一定的间距，默认间距为 8
 
 ### Props
 
-| 属性      | 说明                                                                       | 类型                                                                | 默认值     |
-| --------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |
-| direction | 间距方向                                                                   | ` vertical \|   horizontal`                                         | horizontal |
-| align     | 交叉轴对齐方式                                                             | `start \| end \|center \| baseline`                                 | `-`        |
-| justify   | 主轴对齐方式                                                               | `start  \| end \| center \| between \| around \| evenly \| stretch` | `-`        |
-| wrap      | 是否自动换行，仅在 horizontal 时有效                                       | `boolean / false`                                                   | `-`        |
-| fill      | 是否让 Space 变为一个块级元素，填充整个父元素                              | `boolean / false`                                                   | `-`        |
-| gutter    | 间距大小，如 20px 2em，默认单位为 px，支持数组形式来分别设置横向和纵向间距 | `number \| string \| number[] \| string[]`                          | `-`        |
+| 属性      | 说明                                                                              | 类型                                     | 默认值       |
+| --------- | --------------------------------------------------------------------------------- | ---------------------------------------- | ------------ |
+| direction | 间距方向，可选值 `vertical` `horizontal`                                          | string                                   | `horizontal` |
+| align     | 交叉轴对齐方式，可选值 `start` `end` `center` `baseline`                          | string                                   | `-`          |
+| justify   | 主轴对齐方式，可选值 `start` `end` `center` `between` `around` `evenly` `stretch` | string                                   | `-`          |
+| wrap      | 是否自动换行，仅在 horizontal 时有效                                              | boolean                                  | `false`      |
+| fill      | 是否让 Space 变为一个块级元素，填充整个父元素                                     | boolean                                  | `false`      |
+| gutter    | 间距大小，如 20px 2em，默认单位为 px，支持数组形式来分别设置横向和纵向间距        | number \| string \| number[] \| string[] | `-`          |
 
 ### Slots