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 @@