From ff99b22a6930ea500539f403f23d46cd836e8bca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?=
<1780903673@qq.com>
Date: Sun, 22 Jun 2025 12:12:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E4=BC=98=E5=8C=96=20Inpu?=
=?UTF-8?q?tNumbe=20=E5=A4=84=E7=90=86=E4=B8=AD=E9=97=B4=E7=8A=B6=E6=80=81?=
=?UTF-8?q?=E5=80=BC=E7=9A=84=E9=80=BB=E8=BE=91=EF=BC=8C=E6=94=AF=E6=8C=81?=
=?UTF-8?q?=E9=85=8D=E7=BD=AE=E4=B8=8D=E7=AB=8B=E5=8D=B3=E5=93=8D=E5=BA=94?=
=?UTF-8?q?=E8=BE=93=E5=85=A5=E5=8F=98=E5=8C=96=20(#1116)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/component/input-number.md | 57 +
docs/en-US/component/input-number.md | 58 +
src/subPages/inputNumber/Index.vue | 199 ++-
.../components/wd-input-number/types.ts | 38 +-
.../wd-input-number/wd-input-number.vue | 506 +++++---
tests/components/wd-input-number.test.ts | 1117 +++++++++++++++--
6 files changed, 1647 insertions(+), 328 deletions(-)
diff --git a/docs/component/input-number.md b/docs/component/input-number.md
index da333517..1f89b4fc 100644
--- a/docs/component/input-number.md
+++ b/docs/component/input-number.md
@@ -49,6 +49,17 @@ function handleChange({ value }) {
```
+## 禁用按钮
+
+可以单独禁用增加或减少按钮。
+
+```html
+
+
+
+
+
+```
## 无输入框
@@ -97,6 +108,49 @@ function handleChange({ value }) {
}
```
+## 非立即更新模式
+
+设置 `immediate-change` 为 `false`，输入框内容变化时不会立即触发 `change` 事件，仅在失焦或点击按钮时触发。
+
+```html
+
+
+
+
+
+```
+
+```typescript
+const value1 = ref(1)
+const value2 = ref(1)
+function handleChange({ value }) {
+ console.log(value)
+}
+```
+
+## 初始化时自动更新
+
+设置 `update-on-init` 属性控制是否在初始化时更新 `v-model` 为修正后的值。
+
+- 当 `update-on-init="true"`（默认）时，会将初始值修正到符合 `min`、`max`、`step`、`precision` 等规则的有效值，并同步更新 `v-model`
+- 当 `update-on-init="false"` 时，保持初始值不修正（不改变 `v-model`），但仍会进行显示格式化（如精度处理）
+
+```html
+
+
+
+
+
+```
+
+```typescript
+const value1 = ref(1) // 会自动修正为4（≥3的最小2的倍数）
+const value2 = ref(1) // 保持为1，不会修正但会格式化显示
+function handleChange({ value }) {
+ console.log(value)
+}
+```
+
## 异步变更
通过 `before-change` 可以在输入值变化前进行校验和拦截。
@@ -153,6 +207,9 @@ const beforeChange: InputNumberBeforeChange = (value) => {
| adjustPosition | 原生属性，键盘弹起时，是否自动上推页面 | boolean | - | true | 1.3.11 |
| before-change | 输入框值改变前触发，返回 false 会阻止输入框值改变，支持返回 `Promise` | `(value: number \| string) => boolean \| Promise` | - | - | 1.6.0 |
| long-press | 是否允许长按进行加减 | boolean | - | false | 1.8.0 |
+| immediate-change | 是否立即响应输入变化，false 时仅在失焦和按钮点击时更新 | boolean | - | true | $LOWEST_VERSION$ |
+| update-on-init | 是否在初始化时更新 v-model 为修正后的值 | boolean | - | true | $LOWEST_VERSION$ |
+| input-type | 输入框类型 | string | number / digit | digit | $LOWEST_VERSION$ |
## Events
diff --git a/docs/en-US/component/input-number.md b/docs/en-US/component/input-number.md
index d4e8ae09..e6cc7847 100644
--- a/docs/en-US/component/input-number.md
+++ b/docs/en-US/component/input-number.md
@@ -49,6 +49,18 @@ Set the `disable-input` property.
```
+## Disable Buttons
+
+You can disable the increase or decrease buttons individually.
+
+```html
+
+
+
+
+
+```
+
## Without Input Box
Set `without-input` to hide the input box.
@@ -96,6 +108,49 @@ function handleChange({ value }) {
}
```
+## Non-Immediate Update Mode
+
+Set `immediate-change` to `false`, the `change` event will not be triggered immediately when the input box content changes, only when it loses focus or buttons are clicked.
+
+```html
+
+
+
+
+
+```
+
+```typescript
+const value1 = ref(1)
+const value2 = ref(1)
+function handleChange({ value }) {
+ console.log(value)
+}
+```
+
+## Auto-update on Initialization
+
+Set the `update-on-init` property to control whether to update the `v-model` with the corrected value during initialization.
+
+- When `update-on-init="true"` (default), the initial value will be corrected to comply with `min`, `max`, `step`, `precision` and other rules, and the `v-model` will be updated synchronously
+- When `update-on-init="false"`, the initial value will not be corrected (v-model unchanged), but display formatting (such as precision) will still be applied
+
+```html
+
+
+
+
+
+```
+
+```typescript
+const value1 = ref(1) // Will be auto-corrected to 4 (minimum multiple of 2 that is ≥3)
+const value2 = ref(1) // Remains 1, will not be corrected but will be formatted for display
+function handleChange({ value }) {
+ console.log(value)
+}
+```
+
## Asynchronous Change
Through `before-change`, you can validate and intercept before the input value changes.
@@ -152,6 +207,9 @@ Set the `long-press` property to allow long press for increment/decrement.
| adjustPosition | Native property, whether to automatically push up the page when keyboard pops up | boolean | - | true | 1.3.11 |
| before-change | Triggered before input box value changes, returning false will prevent input box value from changing, supports returning `Promise` | `(value: number \| string) => boolean \| Promise` | - | - | 1.6.0 |
| long-press | Whether to allow long press for increment/decrement | boolean | - | false | 1.8.0 |
+| immediate-change | Whether to respond to input changes immediately, false will only update on blur and button clicks | boolean | - | true | $LOWEST_VERSION$ |
+| update-on-init | Whether to update v-model with corrected value during initialization | boolean | - | true | $LOWEST_VERSION$ |
+| input-type | Input field type | string | number / digit | digit | $LOWEST_VERSION$ |
## Events
diff --git a/src/subPages/inputNumber/Index.vue b/src/subPages/inputNumber/Index.vue
index 293c3d53..3c36338f 100644
--- a/src/subPages/inputNumber/Index.vue
+++ b/src/subPages/inputNumber/Index.vue
@@ -15,6 +15,12 @@
+
+
+
+
+
+
{{ $t('shu-liang-value5') }}{{ value5 }}
@@ -27,12 +33,55 @@
+
+
+ 值：{{ value19 }}（步进值2，最小值3，最大值15，严格步进模式）
+
+
+ 尝试输入各种值：
+
+ • 输入1 → 自动调整为4（≥3的最小2的倍数）
+
+ • 输入5 → 自动调整为4（最接近的2的倍数）
+
+ • 输入17 → 自动调整为14（≤15的最大2的倍数）
+
+
+
+
+
+ 值：{{ value18 }}（可以删除为空，但失焦时会自动修正为最小值）
+
+ 尝试删除输入框中的所有内容，然后点击其他地方失焦，会自动修正为最小值1
+
+
+
+
+
+
+
+ 立即更新模式（默认）- 值：{{ value16 }}
+
+ 非立即更新模式 - 值：{{ value17 }}
+
+ 在输入框中输入内容时，上方的值会立即更新，下方的值仅在失焦或点击按钮时更新
+
+
+
+
+ 自动修正初始值 - 值：{{ value20 }}
+
+ 不修正初始值 - 值：{{ value21 }}
+
+ 上方组件会在初始化时自动将值1修正为4（≥3的最小2的倍数），下方组件不会自动修正
+
+
@@ -43,7 +92,7 @@