From 3ade851aee7fdac2735ae9605245ada9cfd7ceda Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Thu, 14 Mar 2024 17:05:01 +0800
Subject: [PATCH] fix: docs

---
 src/packages/inputnumber/demo.taro.tsx        | 150 ++---------
 src/packages/inputnumber/demo.tsx             | 132 ++--------
 src/packages/inputnumber/demos/h5/demo1.tsx   |   7 +
 src/packages/inputnumber/demos/h5/demo2.tsx   |   7 +
 src/packages/inputnumber/demos/h5/demo3.tsx   |  12 +
 src/packages/inputnumber/demos/h5/demo4.tsx   |   7 +
 src/packages/inputnumber/demos/h5/demo5.tsx   |   7 +
 src/packages/inputnumber/demos/h5/demo6.tsx   |  37 +++
 src/packages/inputnumber/demos/h5/demo7.tsx   |   7 +
 src/packages/inputnumber/demos/h5/demo8.tsx   |  15 ++
 src/packages/inputnumber/demos/h5/demo9.tsx   |  38 +++
 src/packages/inputnumber/demos/taro/demo1.tsx |   7 +
 src/packages/inputnumber/demos/taro/demo2.tsx |   7 +
 src/packages/inputnumber/demos/taro/demo3.tsx |  37 +++
 src/packages/inputnumber/demos/taro/demo4.tsx |   7 +
 src/packages/inputnumber/demos/taro/demo5.tsx |   7 +
 src/packages/inputnumber/demos/taro/demo6.tsx |  37 +++
 src/packages/inputnumber/demos/taro/demo7.tsx |   7 +
 src/packages/inputnumber/demos/taro/demo8.tsx |  36 +++
 src/packages/inputnumber/demos/taro/demo9.tsx |  50 ++++
 src/packages/inputnumber/doc.en-US.md         | 229 +++--------------
 src/packages/inputnumber/doc.md               | 229 +++--------------
 src/packages/inputnumber/doc.taro.md          | 238 +++---------------
 src/packages/inputnumber/doc.zh-TW.md         | 229 +++--------------
 24 files changed, 523 insertions(+), 1016 deletions(-)
 create mode 100644 src/packages/inputnumber/demos/h5/demo1.tsx
 create mode 100644 src/packages/inputnumber/demos/h5/demo2.tsx
 create mode 100644 src/packages/inputnumber/demos/h5/demo3.tsx
 create mode 100644 src/packages/inputnumber/demos/h5/demo4.tsx
 create mode 100644 src/packages/inputnumber/demos/h5/demo5.tsx
 create mode 100644 src/packages/inputnumber/demos/h5/demo6.tsx
 create mode 100644 src/packages/inputnumber/demos/h5/demo7.tsx
 create mode 100644 src/packages/inputnumber/demos/h5/demo8.tsx
 create mode 100644 src/packages/inputnumber/demos/h5/demo9.tsx
 create mode 100644 src/packages/inputnumber/demos/taro/demo1.tsx
 create mode 100644 src/packages/inputnumber/demos/taro/demo2.tsx
 create mode 100644 src/packages/inputnumber/demos/taro/demo3.tsx
 create mode 100644 src/packages/inputnumber/demos/taro/demo4.tsx
 create mode 100644 src/packages/inputnumber/demos/taro/demo5.tsx
 create mode 100644 src/packages/inputnumber/demos/taro/demo6.tsx
 create mode 100644 src/packages/inputnumber/demos/taro/demo7.tsx
 create mode 100644 src/packages/inputnumber/demos/taro/demo8.tsx
 create mode 100644 src/packages/inputnumber/demos/taro/demo9.tsx

diff --git a/src/packages/inputnumber/demo.taro.tsx b/src/packages/inputnumber/demo.taro.tsx
index 6d21a4633a..e2b4904184 100644
--- a/src/packages/inputnumber/demo.taro.tsx
+++ b/src/packages/inputnumber/demo.taro.tsx
@@ -1,54 +1,21 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Taro from '@tarojs/taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import {
-  InputNumber,
-  Cell,
-  Toast,
-  ConfigProvider,
-} from '@/packages/nutui.react.taro'
+import { Cell } from '@/packages/nutui.react.taro'
 import Header from '@/sites/components/header'
 
-interface T {
-  '6333c786': string
-  '0137871a': string
-  '84aa6bce': string
-  '55cc5fb7': string
-  '9636103a': string
-  '181965e2': string
-  e7b2ce1f: string
-  e7b2ce1g: string
-  e7b2ce1y: string
-  '3a42134b': string
-  '65bafb1d': string
-  '7e2394ae': string
-  '7e2394be': string
-}
-
-const customTheme = {
-  nutuiInputnumberButtonWidth: '30px',
-  nutuiInputnumberButtonHeight: '30px',
-  nutuiInputnumberButtonBorderRadius: '2px',
-  nutuiInputnumberInputBackgroundColor: '#fff',
-  nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-  nutuiInputnumberInputHeight: '30px',
-  nutuiInputnumberInputMargin: '0 2px',
-}
-
-const customTheme2 = {
-  nutuiInputnumberButtonWidth: '24px',
-  nutuiInputnumberButtonHeight: '24px',
-  nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-  nutuiInputnumberInputBackgroundColor: '#fff',
-  nutuiInputnumberInputMargin: '0 2px',
-}
-
-const customTheme3 = {
-  nutuiInputnumberInputWidth: '60px',
-}
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 const InputNumberDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       '6333c786': '超出限制事件触发',
       '0137871a': '异步演示2秒后更改',
@@ -57,8 +24,7 @@ const InputNumberDemo = () => {
       '9636103a': '限制输入范围',
       '181965e2': '禁用操作',
       e7b2ce1f: '只读禁用输入框',
-      e7b2ce1g: '自定义按钮样式1',
-      e7b2ce1y: '自定义按钮样式2',
+      e7b2ce1g: '自定义按钮样式',
       '3a42134b': '支持小数点',
       '65bafb1d': '支持异步修改',
       '7e2394ae': '自定义按钮大小',
@@ -72,8 +38,7 @@ const InputNumberDemo = () => {
       '9636103a': '限制輸入範圍',
       '181965e2': '禁用操作',
       e7b2ce1f: '只讀禁用輸入框',
-      e7b2ce1g: '自定義按钮样式1',
-      e7b2ce1y: '自定義按钮样式2',
+      e7b2ce1g: '自定義按钮样式',
       '3a42134b': '支持小數點',
       '65bafb1d': '支持異步修改',
       '7e2394ae': '自定義按鈕大小',
@@ -87,8 +52,7 @@ const InputNumberDemo = () => {
       '9636103a': 'Limit input range',
       '181965e2': 'Disable operation',
       e7b2ce1f: 'read-only disabled input box',
-      e7b2ce1g: 'Custom Button CSS1',
-      e7b2ce1y: 'Custom Button CSS2',
+      e7b2ce1g: 'Custom Button CSS',
       '3a42134b': 'support decimal point',
       '65bafb1d': 'Support for asynchronous modification',
       '7e2394ae': 'custom button size',
@@ -96,116 +60,50 @@ const InputNumberDemo = () => {
     },
   })
 
-  const [inputValue, setInputValue] = useState(-1)
-  const overlimit = () => {
-    toastShow(translated['6333c786'], 'warn')
-  }
-  const onChange = (value: string | number) => {
-    toastShow(translated['0137871a'], 'loading')
-    setTimeout(() => {
-      setInputValue(Number(value))
-      SetShow(false)
-    }, 2000)
-  }
-  const [show, SetShow] = useState(false)
-  const [toastMsg, SetToastMsg] = useState('')
-  const [toastType, SetToastType] = useState('text')
-  const toastShow = (msg: any, type: string) => {
-    SetToastMsg(msg)
-    SetToastType(type)
-    SetShow(true)
-  }
   return (
     <>
       <Header />
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <h2>{translated['84aa6bce']}</h2>
         <Cell>
-          <InputNumber defaultValue={1} allowEmpty />
+          <Demo1 />
         </Cell>
 
         <h2>{translated['55cc5fb7']}</h2>
         <Cell>
-          <InputNumber defaultValue={0} min={0} step={5} />
+          <Demo2 />
         </Cell>
 
         <h2>{translated['9636103a']}</h2>
         <Cell>
-          <InputNumber
-            defaultValue={10}
-            min={10}
-            max={20}
-            onOverlimit={overlimit}
-          />
+          <Demo3 />
         </Cell>
 
         <h2>{translated['181965e2']}</h2>
         <Cell>
-          <InputNumber defaultValue={0} disabled />
+          <Demo4 />
         </Cell>
 
         <h2>{translated.e7b2ce1f}</h2>
         <Cell>
-          <InputNumber defaultValue={1} readOnly />
+          <Demo5 />
         </Cell>
 
         <h2>{translated.e7b2ce1g}</h2>
-        <Cell>
-          <ConfigProvider theme={customTheme}>
-            <InputNumber defaultValue={1} />
-          </ConfigProvider>
-        </Cell>
-
-        <h2>{translated.e7b2ce1y}</h2>
-        <Cell>
-          <ConfigProvider theme={customTheme2}>
-            <InputNumber defaultValue={1} />
-          </ConfigProvider>
-        </Cell>
+        <Demo6 />
 
         <h2>{translated['3a42134b']}</h2>
         <Cell>
-          <InputNumber defaultValue={5.5} step={0.1} digits={1} readOnly />
+          <Demo7 />
         </Cell>
 
         <h2>{translated['65bafb1d']}</h2>
         <Cell>
-          <InputNumber value={inputValue} min={-6} onChange={onChange} async />
+          <Demo8 />
         </Cell>
 
         <h2>Formatter</h2>
-        <Cell>
-          <ConfigProvider theme={customTheme3}>
-            <InputNumber
-              className="format-width"
-              defaultValue={1000}
-              min={10}
-              max={15020}
-              formatter={(value) =>
-                `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-              }
-            />
-          </ConfigProvider>
-        </Cell>
-        <Cell>
-          <ConfigProvider theme={customTheme3}>
-            <InputNumber
-              className="format-width"
-              defaultValue={100}
-              min={0}
-              max={100}
-              formatter={(value) => `${value}%`}
-            />
-          </ConfigProvider>
-        </Cell>
-        <Toast
-          type={toastType}
-          visible={show}
-          content={toastMsg}
-          onClose={() => {
-            SetShow(false)
-          }}
-        />
+        <Demo9 />
       </div>
     </>
   )
diff --git a/src/packages/inputnumber/demo.tsx b/src/packages/inputnumber/demo.tsx
index d41aff4efc..f6c845fc4d 100644
--- a/src/packages/inputnumber/demo.tsx
+++ b/src/packages/inputnumber/demo.tsx
@@ -1,51 +1,18 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import { InputNumber } from './inputnumber'
 import Cell from '@/packages/cell'
-import Toast from '@/packages/toast'
-
-import ConfigProvider from '@/packages/configprovider'
-
-interface T {
-  '6333c786': string
-  '0137871a': string
-  '84aa6bce': string
-  '55cc5fb7': string
-  '9636103a': string
-  '181965e2': string
-  e7b2ce1f: string
-  e7b2ce1g: string
-  e7b2ce1y: string
-  '3a42134b': string
-  '65bafb1d': string
-  '7e2394ae': string
-  '7e2394be': string
-}
-
-const customTheme = {
-  nutuiInputnumberButtonWidth: '30px',
-  nutuiInputnumberButtonHeight: '30px',
-  nutuiInputnumberButtonBorderRadius: '2px',
-  nutuiInputnumberInputBackgroundColor: '#fff',
-  nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-  nutuiInputnumberInputHeight: '30px',
-  nutuiInputnumberInputMargin: '0 2px',
-}
-
-const customTheme2 = {
-  nutuiInputnumberButtonWidth: '24px',
-  nutuiInputnumberButtonHeight: '24px',
-  nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-  nutuiInputnumberInputBackgroundColor: '#fff',
-  nutuiInputnumberInputMargin: '0 2px',
-}
-
-const customTheme3 = {
-  nutuiInputnumberInputWidth: '60px',
-}
+import Demo1 from './demos/h5/demo1'
+import Demo2 from './demos/h5/demo2'
+import Demo3 from './demos/h5/demo3'
+import Demo4 from './demos/h5/demo4'
+import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
+import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
 
 const InputNumberDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       '6333c786': '超出限制事件触发',
       '0137871a': '异步演示2秒后更改',
@@ -54,8 +21,7 @@ const InputNumberDemo = () => {
       '9636103a': '限制输入范围',
       '181965e2': '禁用操作',
       e7b2ce1f: '只读禁用输入框',
-      e7b2ce1g: '自定义按钮样式1',
-      e7b2ce1y: '自定义按钮样式2',
+      e7b2ce1g: '自定义按钮样式',
       '3a42134b': '支持小数点',
       '65bafb1d': '支持异步修改',
       '7e2394ae': '自定义按钮大小',
@@ -69,8 +35,7 @@ const InputNumberDemo = () => {
       '9636103a': '限制輸入範圍',
       '181965e2': '禁用操作',
       e7b2ce1f: '只讀禁用輸入框',
-      e7b2ce1g: '自定義按钮样式1',
-      e7b2ce1y: '自定義按钮样式2',
+      e7b2ce1g: '自定義按钮样式',
       '3a42134b': '支持小數點',
       '65bafb1d': '支持異步修改',
       '7e2394ae': '自定義按鈕大小',
@@ -84,8 +49,7 @@ const InputNumberDemo = () => {
       '9636103a': 'Limit input range',
       '181965e2': 'Disable operation',
       e7b2ce1f: 'read-only disabled input box',
-      e7b2ce1g: 'Custom Button CSS1',
-      e7b2ce1y: 'Custom Button CSS2',
+      e7b2ce1g: 'Custom Button CSS',
       '3a42134b': 'support decimal point',
       '65bafb1d': 'Support for asynchronous modification',
       '7e2394ae': 'custom button size',
@@ -93,99 +57,49 @@ const InputNumberDemo = () => {
     },
   })
 
-  const [inputValue, setInputValue] = useState(-1)
-  const overlimit = () => {
-    Toast.show({ content: translated['6333c786'], icon: 'warn' })
-  }
-  const onChange = (value: string | number) => {
-    Toast.show({ icon: 'loading', content: translated['0137871a'] })
-    setTimeout(() => {
-      setInputValue(Number(value))
-      Toast.clear()
-    }, 2000)
-  }
   return (
     <>
       <div className="demo">
         <h2>{translated['84aa6bce']}</h2>
         <Cell>
-          <InputNumber defaultValue={1} allowEmpty />
+          <Demo1 />
         </Cell>
 
         <h2>{translated['55cc5fb7']}</h2>
         <Cell>
-          <InputNumber defaultValue={0} min={0} step={5} />
+          <Demo2 />
         </Cell>
 
         <h2>{translated['9636103a']}</h2>
         <Cell>
-          <InputNumber
-            defaultValue={10}
-            min={10}
-            max={20}
-            onOverlimit={overlimit}
-          />
+          <Demo3 />
         </Cell>
 
         <h2>{translated['181965e2']}</h2>
         <Cell>
-          <InputNumber defaultValue={0} disabled />
+          <Demo4 />
         </Cell>
 
         <h2>{translated.e7b2ce1f}</h2>
         <Cell>
-          <InputNumber defaultValue={1} readOnly />
+          <Demo5 />
         </Cell>
 
         <h2>{translated.e7b2ce1g}</h2>
-        <Cell>
-          <ConfigProvider theme={customTheme}>
-            <InputNumber defaultValue={1} />
-          </ConfigProvider>
-        </Cell>
-
-        <h2>{translated.e7b2ce1y}</h2>
-        <Cell>
-          <ConfigProvider theme={customTheme2}>
-            <InputNumber defaultValue={1} />
-          </ConfigProvider>
-        </Cell>
+        <Demo6 />
 
         <h2>{translated['3a42134b']}</h2>
         <Cell>
-          <InputNumber defaultValue={5.5} step={0.1} digits={1} readOnly />
+          <Demo7 />
         </Cell>
 
         <h2>{translated['65bafb1d']}</h2>
         <Cell>
-          <InputNumber value={inputValue} min={-6} onChange={onChange} async />
+          <Demo8 />
         </Cell>
 
         <h2>Formatter</h2>
-        <Cell>
-          <ConfigProvider theme={customTheme3}>
-            <InputNumber
-              className="format-width"
-              defaultValue={1000}
-              min={10}
-              max={15020}
-              formatter={(value) =>
-                `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-              }
-            />
-          </ConfigProvider>
-        </Cell>
-        <Cell>
-          <ConfigProvider theme={customTheme3}>
-            <InputNumber
-              className="format-width"
-              defaultValue={100}
-              min={0}
-              max={100}
-              formatter={(value) => `${value}%`}
-            />
-          </ConfigProvider>
-        </Cell>
+        <Demo9 />
       </div>
     </>
   )
diff --git a/src/packages/inputnumber/demos/h5/demo1.tsx b/src/packages/inputnumber/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..ceafd607c8
--- /dev/null
+++ b/src/packages/inputnumber/demos/h5/demo1.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  return <InputNumber defaultValue={1} allowEmpty />
+}
+export default Demo1
diff --git a/src/packages/inputnumber/demos/h5/demo2.tsx b/src/packages/inputnumber/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..fa419a8f12
--- /dev/null
+++ b/src/packages/inputnumber/demos/h5/demo2.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  return <InputNumber defaultValue={0} min={0} step={5} />
+}
+export default Demo2
diff --git a/src/packages/inputnumber/demos/h5/demo3.tsx b/src/packages/inputnumber/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..8fcf1e3a68
--- /dev/null
+++ b/src/packages/inputnumber/demos/h5/demo3.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { InputNumber, Toast } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  const overlimit = () => {
+    Toast.show({ content: '超出限制事件触发', icon: 'warn' })
+  }
+  return (
+    <InputNumber defaultValue={10} min={10} max={20} onOverlimit={overlimit} />
+  )
+}
+export default Demo3
diff --git a/src/packages/inputnumber/demos/h5/demo4.tsx b/src/packages/inputnumber/demos/h5/demo4.tsx
new file mode 100644
index 0000000000..f16986841a
--- /dev/null
+++ b/src/packages/inputnumber/demos/h5/demo4.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+  return <InputNumber defaultValue={0} disabled />
+}
+export default Demo4
diff --git a/src/packages/inputnumber/demos/h5/demo5.tsx b/src/packages/inputnumber/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..252ce230fb
--- /dev/null
+++ b/src/packages/inputnumber/demos/h5/demo5.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+  return <InputNumber defaultValue={1} readOnly />
+}
+export default Demo5
diff --git a/src/packages/inputnumber/demos/h5/demo6.tsx b/src/packages/inputnumber/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..1132dec7be
--- /dev/null
+++ b/src/packages/inputnumber/demos/h5/demo6.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { Cell, InputNumber, ConfigProvider } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  const customTheme = {
+    nutuiInputnumberButtonWidth: '30px',
+    nutuiInputnumberButtonHeight: '30px',
+    nutuiInputnumberButtonBorderRadius: '2px',
+    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
+    nutuiInputnumberInputHeight: '30px',
+    nutuiInputnumberInputMargin: '0 2px',
+  }
+
+  const customTheme2 = {
+    nutuiInputnumberButtonWidth: '24px',
+    nutuiInputnumberButtonHeight: '24px',
+    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
+    nutuiInputnumberInputBackgroundColor: '#fff',
+    nutuiInputnumberInputMargin: '0 2px',
+  }
+
+  return (
+    <>
+      <Cell>
+        <ConfigProvider theme={customTheme}>
+          <InputNumber defaultValue={1} />
+        </ConfigProvider>
+      </Cell>
+      <Cell>
+        <ConfigProvider theme={customTheme2}>
+          <InputNumber defaultValue={1} />
+        </ConfigProvider>
+      </Cell>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/inputnumber/demos/h5/demo7.tsx b/src/packages/inputnumber/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..9d96c24ef4
--- /dev/null
+++ b/src/packages/inputnumber/demos/h5/demo7.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+  return <InputNumber defaultValue={5.5} step={0.1} digits={1} readOnly />
+}
+export default Demo7
diff --git a/src/packages/inputnumber/demos/h5/demo8.tsx b/src/packages/inputnumber/demos/h5/demo8.tsx
new file mode 100644
index 0000000000..fc9c270ad7
--- /dev/null
+++ b/src/packages/inputnumber/demos/h5/demo8.tsx
@@ -0,0 +1,15 @@
+import React, { useState } from 'react'
+import { InputNumber, Toast } from '@nutui/nutui-react'
+
+const Demo8 = () => {
+  const [inputValue, setInputValue] = useState(0)
+  const onChange = (value: string | number) => {
+    Toast.show({ icon: 'loading', content: '异步演示2秒后更改' })
+    setTimeout(() => {
+      setInputValue(Number(value))
+      Toast.clear()
+    }, 2000)
+  }
+  return <InputNumber value={inputValue} min={-6} onChange={onChange} async />
+}
+export default Demo8
diff --git a/src/packages/inputnumber/demos/h5/demo9.tsx b/src/packages/inputnumber/demos/h5/demo9.tsx
new file mode 100644
index 0000000000..3b588261d4
--- /dev/null
+++ b/src/packages/inputnumber/demos/h5/demo9.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Cell, InputNumber } from '@nutui/nutui-react'
+import ConfigProvider from '@/packages/configprovider'
+
+const Demo9 = () => {
+  const customTheme3 = {
+    nutuiInputnumberInputWidth: '60px',
+  }
+  return (
+    <>
+      <Cell>
+        <ConfigProvider theme={customTheme3}>
+          <InputNumber
+            className="format-width"
+            defaultValue={1000}
+            min={10}
+            max={15020}
+            formatter={(value) =>
+              `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+            }
+          />
+        </ConfigProvider>
+      </Cell>
+      <Cell>
+        <ConfigProvider theme={customTheme3}>
+          <InputNumber
+            className="format-width"
+            defaultValue={100}
+            min={0}
+            max={100}
+            formatter={(value) => `${value}%`}
+          />
+        </ConfigProvider>
+      </Cell>
+    </>
+  )
+}
+export default Demo9
diff --git a/src/packages/inputnumber/demos/taro/demo1.tsx b/src/packages/inputnumber/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..9d6c45d6f9
--- /dev/null
+++ b/src/packages/inputnumber/demos/taro/demo1.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+  return <InputNumber defaultValue={1} allowEmpty />
+}
+export default Demo1
diff --git a/src/packages/inputnumber/demos/taro/demo2.tsx b/src/packages/inputnumber/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..65405737a8
--- /dev/null
+++ b/src/packages/inputnumber/demos/taro/demo2.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react-taro'
+
+const Demo2 = () => {
+  return <InputNumber defaultValue={0} min={0} step={5} />
+}
+export default Demo2
diff --git a/src/packages/inputnumber/demos/taro/demo3.tsx b/src/packages/inputnumber/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..61b92cb9b0
--- /dev/null
+++ b/src/packages/inputnumber/demos/taro/demo3.tsx
@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import { InputNumber, Toast } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+  const overlimit = () => {
+    toastShow('超出限制事件触发', 'warn')
+  }
+  const [show, SetShow] = useState(false)
+  const [toastMsg, SetToastMsg] = useState('')
+  const [toastType, SetToastType] = useState('text')
+
+  const toastShow = (msg: any, type: string) => {
+    SetToastMsg(msg)
+    SetToastType(type)
+    SetShow(true)
+  }
+
+  return (
+    <>
+      <InputNumber
+        defaultValue={10}
+        min={10}
+        max={20}
+        onOverlimit={overlimit}
+      />
+      <Toast
+        type={toastType}
+        visible={show}
+        content={toastMsg}
+        onClose={() => {
+          SetShow(false)
+        }}
+      />
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/inputnumber/demos/taro/demo4.tsx b/src/packages/inputnumber/demos/taro/demo4.tsx
new file mode 100644
index 0000000000..a6973e99cf
--- /dev/null
+++ b/src/packages/inputnumber/demos/taro/demo4.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react-taro'
+
+const Demo4 = () => {
+  return <InputNumber defaultValue={0} disabled />
+}
+export default Demo4
diff --git a/src/packages/inputnumber/demos/taro/demo5.tsx b/src/packages/inputnumber/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..4112d703fa
--- /dev/null
+++ b/src/packages/inputnumber/demos/taro/demo5.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react-taro'
+
+const Demo5 = () => {
+  return <InputNumber defaultValue={1} readOnly />
+}
+export default Demo5
diff --git a/src/packages/inputnumber/demos/taro/demo6.tsx b/src/packages/inputnumber/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..01d9a7c893
--- /dev/null
+++ b/src/packages/inputnumber/demos/taro/demo6.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { Cell, InputNumber, ConfigProvider } from '@nutui/nutui-react-taro'
+
+const Demo6 = () => {
+  const customTheme = {
+    nutuiInputnumberButtonWidth: '30px',
+    nutuiInputnumberButtonHeight: '30px',
+    nutuiInputnumberButtonBorderRadius: '2px',
+    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
+    nutuiInputnumberInputHeight: '30px',
+    nutuiInputnumberInputMargin: '0 2px',
+  }
+
+  const customTheme2 = {
+    nutuiInputnumberButtonWidth: '24px',
+    nutuiInputnumberButtonHeight: '24px',
+    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
+    nutuiInputnumberInputBackgroundColor: '#fff',
+    nutuiInputnumberInputMargin: '0 2px',
+  }
+
+  return (
+    <>
+      <Cell>
+        <ConfigProvider theme={customTheme}>
+          <InputNumber defaultValue={1} />
+        </ConfigProvider>
+      </Cell>
+      <Cell>
+        <ConfigProvider theme={customTheme2}>
+          <InputNumber defaultValue={1} />
+        </ConfigProvider>
+      </Cell>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/inputnumber/demos/taro/demo7.tsx b/src/packages/inputnumber/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..04e1962c31
--- /dev/null
+++ b/src/packages/inputnumber/demos/taro/demo7.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputNumber } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+  return <InputNumber defaultValue={5.5} step={0.1} digits={1} readOnly />
+}
+export default Demo7
diff --git a/src/packages/inputnumber/demos/taro/demo8.tsx b/src/packages/inputnumber/demos/taro/demo8.tsx
new file mode 100644
index 0000000000..f4772085d1
--- /dev/null
+++ b/src/packages/inputnumber/demos/taro/demo8.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import { InputNumber, Toast } from '@nutui/nutui-react-taro'
+
+const Demo8 = () => {
+  const [inputValue, setInputValue] = useState(0)
+  const [show, SetShow] = useState(false)
+  const [toastMsg, SetToastMsg] = useState('')
+  const [toastType, SetToastType] = useState('text')
+
+  const toastShow = (msg: any, type: string) => {
+    SetToastMsg(msg)
+    SetToastType(type)
+    SetShow(true)
+  }
+  const onChange = (value: string | number) => {
+    toastShow('异步演示 2 秒后更改', 'loading')
+    setTimeout(() => {
+      setInputValue(Number(value))
+      SetShow(false)
+    }, 2000)
+  }
+  return (
+    <>
+      <InputNumber value={inputValue} min="-6" onChange={onChange} async />
+      <Toast
+        type={toastType}
+        visible={show}
+        content={toastMsg}
+        onClose={() => {
+          SetShow(false)
+        }}
+      />
+    </>
+  )
+}
+export default Demo8
diff --git a/src/packages/inputnumber/demos/taro/demo9.tsx b/src/packages/inputnumber/demos/taro/demo9.tsx
new file mode 100644
index 0000000000..08ec94e19f
--- /dev/null
+++ b/src/packages/inputnumber/demos/taro/demo9.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { Cell, InputNumber, Toast } from '@nutui/nutui-react-taro'
+import ConfigProvider from '@/packages/configprovider'
+
+const Demo9 = () => {
+  const customTheme3 = {
+    nutuiInputnumberInputWidth: '60px',
+  }
+  const [toastType, SetToastType] = useState('text')
+  const [show, SetShow] = useState(false)
+  const [toastMsg, SetToastMsg] = useState('')
+
+  return (
+    <>
+      <Cell>
+        <ConfigProvider theme={customTheme3}>
+          <InputNumber
+            className="format-width"
+            defaultValue={1000}
+            min={10}
+            max={15020}
+            formatter={(value) =>
+              `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+            }
+          />
+        </ConfigProvider>
+      </Cell>
+      <Cell>
+        <ConfigProvider theme={customTheme3}>
+          <InputNumber
+            className="format-width"
+            defaultValue={100}
+            min={0}
+            max={100}
+            formatter={(value) => `${value}%`}
+          />
+        </ConfigProvider>
+      </Cell>
+      <Toast
+        type={toastType}
+        visible={show}
+        content={toastMsg}
+        onClose={() => {
+          SetShow(false)
+        }}
+      />
+    </>
+  )
+}
+export default Demo9
diff --git a/src/packages/inputnumber/doc.en-US.md b/src/packages/inputnumber/doc.en-US.md
index 6949b6474c..298f0ff730 100644
--- a/src/packages/inputnumber/doc.en-US.md
+++ b/src/packages/inputnumber/doc.en-US.md
@@ -16,245 +16,88 @@ import { InputNumber } from '@nutui/nutui-react';
 
 Initialize a default value
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={1} />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
 :::
 
 ### Step size setting
 
 Set step `step` 5
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={0} min={0} step="5" />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
+
 :::
 
 ### Limit input range
 
 `min` and `max` attributes represent the minimum and maximum values respectively
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, Toast } from '@nutui/nutui-react';
-
-const App = () => {
-  const overlimit = (e: MouseEvent) => {
-    console.log(e)
-    Toast.warn('Exceeded limit event triggered')
-  }
-  return (
-    <>
-      <InputNumber defaultValue={10} min="10" max="20" onOverlimit={overlimit} />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
+
 :::
 
 ### Disabled state
 
 `disabled` When disabled, you cannot click the button or modify the input box.
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={0} disabled />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
+
 :::
 
 ### Read only disable input box
 
 `readOnly` Set read-only disable input box input behavior
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={1} readOnly />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
 :::
 
 ### Set the button style
 
 The buttons can be styled using the `ConfigProvider` component.
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, ConfigProvider } from '@nutui/nutui-react';
-
-const App = () => {
-  const customTheme = {
-    nutuiInputnumberButtonWidth: '30px',
-    nutuiInputnumberButtonHeight: '30px',
-    nutuiInputnumberButtonBorderRadius: '2px',
-    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-    nutuiInputnumberInputHeight: '30px',
-    nutuiInputnumberInputMargin: '0 2px',
-  }
-
-  const customTheme2 = {
-    nutuiInputnumberButtonWidth: '24px',
-    nutuiInputnumberButtonHeight: '24px',
-    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-    nutuiInputnumberInputBackgroundColor: '#fff',
-    nutuiInputnumberInputMargin: '0 2px',
-  }
-
-  return (
-    <>
-      <ConfigProvider theme={customTheme}>
-        <InputNumber defaultValue={1} />
-      </ConfigProvider>
-      <ConfigProvider theme={customTheme2}>
-        <InputNumber defaultValue={1} />
-      </ConfigProvider>
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
 :::
 
 ### Support decimal point
 
 Set step size `step` 0.1 `decimal-places` keep 1 decimal place
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  creturn (
-    <>
-      <InputNumber defaultValue={5.5} step="0.1" digits="1" readOnly />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
 :::
 
 ### Support asynchronous modification
 
 Asynchronous modification through `change` event and `model-value`
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, Toast } from '@nutui/nutui-react';
-
-const App = () => {
-  const [inputValue, setInputValue] = useState(0)
-  const onChange = (value: string | number) => {
-    Toast.loading(translated['0137871a'])
-    setTimeout(() => {
-      setInputValue(Number(value))
-      Toast.hide()
-    }, 2000)
-  }
-  return (
-    <>
-      <InputNumber value={inputValue} min="-6" onChange={onChange} async />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
 :::
 
 ### support formatter
 
-:::demo
-
-```tsx
-import React from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber
-        style={{"--nutui-inputnumber-input-width": "60px"}}
-        modelValue="1000"
-        min={10}
-        max={15020}
-        formatter={(value) =>
-          `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-        }
-      />
-      <InputNumber
-        style={{"--nutui-inputnumber-input-width": "60px"}}
-        modelValue="100"
-        min={0}
-        max={100}
-        formatter={(value) => `${value}%`}
-      />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
 :::
 
 ## InputNumber
diff --git a/src/packages/inputnumber/doc.md b/src/packages/inputnumber/doc.md
index 9f03d7048a..bce322ba1d 100644
--- a/src/packages/inputnumber/doc.md
+++ b/src/packages/inputnumber/doc.md
@@ -16,245 +16,88 @@ import { InputNumber } from '@nutui/nutui-react';
 
 初始化一个默认值
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={1} />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
 :::
 
 ### 步长设置
 
 设置步长 `step` 5
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={0} min={0} step="5" />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
+
 :::
 
 ### 限制输入范围
 
 `min` 和 `max` 属性分别表示最小值和最大值
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, Toast } from '@nutui/nutui-react';
-
-const App = () => {
-  const overlimit = (e: MouseEvent) => {
-    console.log(e)
-    Toast.warn('超出限制事件触发')
-  }
-  return (
-    <>
-      <InputNumber defaultValue={10} min="10" max="20" onOverlimit={overlimit} />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
+
 :::
 
 ### 禁用状态
 
 `disabled` 禁用状态下无法点击按钮或修改输入框。
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={0} disabled />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
+
 :::
 
 ### 只读禁用输入框
 
 `readOnly` 设置只读禁用输入框输入行为
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={1} readOnly />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
 :::
 
 ### 设置按钮样式
 
 可使用`ConfigProvider`组件来设置按钮样式。
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, ConfigProvider } from '@nutui/nutui-react';
-
-const App = () => {
-  const customTheme = {
-    nutuiInputnumberButtonWidth: '30px',
-    nutuiInputnumberButtonHeight: '30px',
-    nutuiInputnumberButtonBorderRadius: '2px',
-    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-    nutuiInputnumberInputHeight: '30px',
-    nutuiInputnumberInputMargin: '0 2px',
-  }
-
-  const customTheme2 = {
-    nutuiInputnumberButtonWidth: '24px',
-    nutuiInputnumberButtonHeight: '24px',
-    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-    nutuiInputnumberInputBackgroundColor: '#fff',
-    nutuiInputnumberInputMargin: '0 2px',
-  }
-
-  return (
-    <>
-      <ConfigProvider theme={customTheme}>
-        <InputNumber defaultValue={1} />
-      </ConfigProvider>
-      <ConfigProvider theme={customTheme2}>
-        <InputNumber defaultValue={1} />
-      </ConfigProvider>
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
 :::
 
 ### 支持小数点
 
 设置步长 `step` 0.1 `decimal-places` 小数保留1位
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={5.5} step="0.1" digits="1" readOnly />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
 :::
 
 ### 支持异步修改
 
 通过 `change` 事件和 `model-value` 进行异步修改
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, Toast } from '@nutui/nutui-react';
-
-const App = () => {
-  const [inputValue, setInputValue] = useState(0)
-  const onChange = (value: string | number) => {
-    Toast.loading(translated['0137871a'])
-    setTimeout(() => {
-      setInputValue(Number(value))
-      Toast.hide()
-    }, 2000)
-  }
-  return (
-    <>
-      <InputNumber value={inputValue} min="-6" onChange={onChange} async />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
 :::
 
 ### 支持formatter
 
-:::demo
-
-```tsx
-import React from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber
-        style={{"--nutui-inputnumber-input-width": "60px"}}
-        modelValue="1000"
-        min={10}
-        max={15020}
-        formatter={(value) =>
-          `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-        }
-      />
-      <InputNumber
-        style={{"--nutui-inputnumber-input-width": "60px"}}
-        modelValue="100"
-        min={0}
-        max={100}
-        formatter={(value) => `${value}%`}
-      />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
 :::
 
 ## InputNumber
diff --git a/src/packages/inputnumber/doc.taro.md b/src/packages/inputnumber/doc.taro.md
index 1e066caf64..08acf26105 100644
--- a/src/packages/inputnumber/doc.taro.md
+++ b/src/packages/inputnumber/doc.taro.md
@@ -16,254 +16,88 @@ import { InputNumber } from '@nutui/nutui-react-taro';
 
 初始化一个默认值
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={1} />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
+
 :::
 
 ### 步长设置
 
 设置步长 `step` 5
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={0} min={0} step="5" />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
+
 :::
 
 ### 限制输入范围
 
 `min` 和 `max` 属性分别表示最小值和最大值
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, Toast } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const overlimit = (e: MouseEvent) => {
-    console.log(e)
-    Toast.warn('超出限制事件触发')
-  }
-  return (
-    <>
-      <InputNumber
-        defaultValue={10}
-        min="10"
-        max="20"
-        onOverlimit={overlimit}
-      />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='taro/demo3.tsx'></CodeBlock>
+
 :::
 
 ### 禁用状态
 
 `disabled` 禁用状态下无法点击按钮或修改输入框。
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={0} disabled />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='taro/demo4.tsx'></CodeBlock>
+
 :::
 
 ### 只读禁用输入框
 
 `readOnly` 设置只读禁用输入框输入行为
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={1} readOnly />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='taro/demo5.tsx'></CodeBlock>
+
 :::
 
 ### 设置按钮样式
 
 可使用`ConfigProvider`组件来设置按钮样式。
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, ConfigProvider } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [inputState, setInputState] = useState({
-    val: 1,
-  })
-
-  const customTheme = {
-    nutuiInputnumberButtonWidth: '30px',
-    nutuiInputnumberButtonHeight: '30px',
-    nutuiInputnumberButtonBorderRadius: '2px',
-    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-    nutuiInputnumberInputHeight: '30px',
-    nutuiInputnumberInputMargin: '0 2px',
-  }
-
-  const customTheme2 = {
-    nutuiInputnumberButtonWidth: '24px',
-    nutuiInputnumberButtonHeight: '24px',
-    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-    nutuiInputnumberInputBackgroundColor: '#fff',
-    nutuiInputnumberInputMargin: '0 2px',
-  }
-
-  return (
-    <>
-      <ConfigProvider theme={customTheme}>
-        <InputNumber defaultValue={1} />
-      </ConfigProvider>
-      <ConfigProvider theme={customTheme2}>
-        <InputNumber defaultValue={1} />
-      </ConfigProvider>
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='taro/demo6.tsx'></CodeBlock>
+
 :::
 
 ### 支持小数点
 
 设置步长 `step` 0.1 `decimal-places` 小数保留1位
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={5.5} step="0.1" digits="1" readOnly />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='taro/demo7.tsx'></CodeBlock>
+
 :::
 
 ### 支持异步修改
 
 通过 `change` 事件和 `model-value` 进行异步修改
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, Toast } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [inputValue, setInputValue] = useState(0)
-  const onChange = (value: string | number) => {
-    Toast.loading('异步演示 2 秒后更改')
-    setTimeout(() => {
-      setInputValue(Number(value))
-      Toast.hide()
-    }, 2000)
-  }
-  return (
-    <>
-      <InputNumber value={inputValue} min="-6" onChange={onChange} async />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='taro/demo8.tsx'></CodeBlock>
+
 :::
 
 ### 支持formatter
 
-:::demo
-
-```tsx
-import React from "react";
-import { InputNumber } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber
-        style={{"--nutui-inputnumber-input-width": "60px"}}
-        modelValue="1000"
-        min={10}
-        max={15020}
-        formatter={(value) =>
-          `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-        }
-      />
-      <InputNumber
-        style={{"--nutui-inputnumber-input-width": "60px"}}
-        modelValue="100"
-        min={0}
-        max={100}
-        formatter={(value) => `${value}%`}
-      />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='taro/demo9.tsx'></CodeBlock>
+
 :::
 
 ## InputNumber
diff --git a/src/packages/inputnumber/doc.zh-TW.md b/src/packages/inputnumber/doc.zh-TW.md
index 9bf79025a6..87b4953c0d 100644
--- a/src/packages/inputnumber/doc.zh-TW.md
+++ b/src/packages/inputnumber/doc.zh-TW.md
@@ -16,245 +16,88 @@ import { InputNumber } from '@nutui/nutui-react';
 
 初始化一個默認值
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={1} />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
 :::
 
 ### 步長設置
 
 設置步長 `step` 5
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={0} min={0} step="5" />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
+
 :::
 
 ### 限制輸入範圍
 
 `min` 和 `max` 屬性分別錶示最小值和最大值
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, Toast } from '@nutui/nutui-react';
-
-const App = () => {
-  const overlimit = (e: MouseEvent) => {
-    console.log(e)
-    Toast.warn('超出限制事件觸發')
-  }
-  return (
-    <>
-      <InputNumber defaultValue={10} min="10" max="20" onOverlimit={overlimit} />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
+
 :::
 
 ### 禁用狀態
 
 `disabled` 禁用狀態下無法點擊按鈕或修改輸入框。
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={0} disabled />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
+
 :::
 
 ### 只讀禁用輸入框
 
 `readOnly` 設置只讀禁用輸入框輸入行為
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={1} readOnly />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
 :::
 
 ### 設置按鈕樣式
 
 可使用`ConfigProvider`組件來設置按鈕樣式。
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, ConfigProvider } from '@nutui/nutui-react';
-
-const App = () => {
-  const customTheme = {
-    nutuiInputnumberButtonWidth: '30px',
-    nutuiInputnumberButtonHeight: '30px',
-    nutuiInputnumberButtonBorderRadius: '2px',
-    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-    nutuiInputnumberInputHeight: '30px',
-    nutuiInputnumberInputMargin: '0 2px',
-  }
-
-  const customTheme2 = {
-    nutuiInputnumberButtonWidth: '24px',
-    nutuiInputnumberButtonHeight: '24px',
-    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-    nutuiInputnumberInputBackgroundColor: '#fff',
-    nutuiInputnumberInputMargin: '0 2px',
-  }
-
-  return (
-    <>
-      <ConfigProvider theme={customTheme}>
-        <InputNumber defaultValue={1} />
-      </ConfigProvider>
-      <ConfigProvider theme={customTheme2}>
-        <InputNumber defaultValue={1} />
-      </ConfigProvider>
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
 :::
 
 ### 支持小數點
 
 設置步長 `step` 0.1 `decimal-places` 小數保留1位
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber defaultValue={5.5} step="0.1" digits="1" readOnly />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
 :::
 
 ### 支持異步修改
 
 通過 `change` 事件和 `model-value` 進行異步修改
 
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { InputNumber, Toast } from '@nutui/nutui-react';
-
-const App = () => {
-  const [inputValue, setInputValue] = useState(0)
-  const onChange = (value: string | number) => {
-    Toast.loading(translated['0137871a'])
-    setTimeout(() => {
-      setInputValue(Number(value))
-      Toast.hide()
-    }, 2000)
-  }
-  return (
-    <>
-      <InputNumber value={inputValue} min="-6" onChange={onChange} async />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
 :::
 
 ### 支持formatter
 
-:::demo
-
-```tsx
-import React from "react";
-import { InputNumber } from '@nutui/nutui-react';
-
-const App = () => {
-  return (
-    <>
-      <InputNumber
-        style={{"--nutui-inputnumber-input-width": "60px"}}
-        modelValue="1000"
-        min={10}
-        max={15020}
-        formatter={(value) =>
-          `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-        }
-      />
-      <InputNumber
-        style={{"--nutui-inputnumber-input-width": "60px"}}
-        modelValue="100"
-        min={0}
-        max={100}
-        formatter={(value) => `${value}%`}
-      />
-    </>
-  )
-}
-export default App;
-```
-
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
 :::
 
 ## InputNumber