InputNumber

Composed of increase button, decrease button and input box, used for inputting and adjusting numbers within a certain range.

Basic Usage

Bind the input value through v-model, and you can listen to the change of input value through the change event.

<wd-input-number v-model="value" @change="handleChange" />

const value = ref<number>(1)
function handleChange({ value }) {
  console.log(value)
}

Set Step

Set step as the step size, which is the absolute value of each value change.

<wd-input-number v-model="value" @change="handleChange" :step="2" />

Set Minimum and Maximum Values

Set min as the minimum value and max as the maximum value. The default value of min is 1.

<wd-input-number v-model="value" @change="handleChange" :min="3" :max="10" />

Disabled

Set the disabled property.

<wd-input-number v-model="value" @change="handleChange" disabled />

Disable Input Box

Set the disable-input property.

<wd-input-number v-model="value" @change="handleChange" disable-input />

Disable Buttons

You can disable the increase or decrease buttons individually.

<!-- Disable minus button -->
<wd-input-number v-model="value" @change="handleChange" disable-minus />

<!-- Disable plus button -->
<wd-input-number v-model="value" @change="handleChange" disable-plus />

Without Input Box

Set without-input to hide the input box.

<wd-input-number v-model="value" @change="handleChange" without-input />

Set Decimal Precision

Set the precision property, default is 0.

<wd-input-number v-model="value" @change="handleChange" :precision="2" :step="0.1" />

Strict Step Multiple

Set the step-strictly property to force the input box content to be a multiple of step (when the user completes the input and triggers change, the input box content will be corrected).

<wd-input-number v-model="value" @change="handleChange" step-strictly :step="2" />

Modify Input Box Width

Set input-width to set the width. This value accepts a string and can be any unit that represents size.

<wd-input-number v-model="value" @change="handleChange" input-width="70px" />

Allow Empty Value, Set Placeholder

Set the allow-null property to allow empty values, set placeholder to prompt filling.

<wd-input-number v-model="value" allow-null placeholder="No limit" @change="handleChange" />

const value = ref<number|string>('')
function handleChange({ value }) {
  console.log(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.

<!-- Immediate update mode (default) -->
<wd-input-number v-model="value1" @change="handleChange" :immediate-change="true" />

<!-- Non-immediate update mode -->
<wd-input-number v-model="value2" @change="handleChange" :immediate-change="false" />

const value1 = ref<number>(1)
const value2 = ref<number>(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

<!-- Auto-update initial value (default) -->
<wd-input-number v-model="value1" @change="handleChange" :update-on-init="true" :min="3" :max="15" :step="2" step-strictly />

<!-- Don't update initial value, keep original value -->
<wd-input-number v-model="value2" @change="handleChange" :update-on-init="false" :min="3" :max="15" :step="2" step-strictly />

const value1 = ref<number>(1) // Will be auto-corrected to 4 (minimum multiple of 2 that is ≥3)
const value2 = ref<number>(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.

<wd-input-number v-model="value" :before-change="beforeChange" />

import { ref } from 'vue'
import { useToast } from '@/uni_modules/wot-design-uni'
import type { InputNumberBeforeChange } from '@/uni_modules/wot-design-uni/components/wd-input-number/types'
const { loading, close } = useToast()

const value = ref<number>(1)
 
const beforeChange: InputNumberBeforeChange = (value) => {
  loading({ msg: `Updating to ${value}...` })
  return new Promise((resolve) => {
    setTimeout(() => {
      close()
      resolve(true)
    }, 500)
  })
}

Long Press for Increment/Decrement

Set the long-press property to allow long press for increment/decrement.

<wd-input-number v-model="value" long-press @change="handleChange" />

Attributes

Parameter	Description	Type	Options	Default	Version
v-model	Binding value	number / string	-	-	-
min	Minimum value	number	-	1	-
max	Maximum value	number	-	Infinity	-
step	Step size	number	-	1	-
step-strictly	Strictly value as multiple of step	boolean	-	false	-
precision	Decimal precision	number	-	0	-
disabled	Disabled	boolean	-	false	-
without-input	Hide input box	boolean	-	false	-
input-width	Input box width	string	-	36px	-
allow-null	Whether to allow empty value, when set to true, allows passing empty string	boolean	-	false	-
placeholder	Placeholder text	string	-	-	-
disable-input	Disable input box	boolean	-	false	0.2.14
disable-plus	Disable increase button	boolean	-	false	0.2.14
disable-minus	Disable decrease button	boolean	-	false	0.2.14
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<boolean>	-	-	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	1.10.0
update-on-init	Whether to update v-model with corrected value during initialization	boolean	-	true	1.10.0
input-type	Input field type	string	number / digit	digit	1.10.0

Events

Event Name	Description	Parameters	Version
change	Value modification event	{ value }	-
focus	Input box focus event	{ value, height }	-
blur	Input box blur event	{ value }	-

External Classes

Class Name	Description	Version
custom-class	Root node style	-

Source Code

Documentation

• Component