Stepper stepper

introduce

The stepper consists of an increase button, a decrease button and an input box, which is used to input and adjust numbers within a certain range.

Code Demo

Basic usage

By binding the input value with v-model, you can monitor changes in the input value through the change event.

<z-stepper v-model="value" />

import { ref } from 'vue';
const value = ref(1);

Step size setting

Use the step attribute to set the value that changes each time the increase or decrease button is clicked. The default is 1.

<z-stepper v-model="value" step="2" />

Limit the range of the input value through the min and max attributes. By default, the maximum or minimum value will be automatically corrected after exceeding the range. Automatic correction can be turned off by auto-fixed.

<z-stepper v-model="value" min="5" max="8" />

Limit input to integers

After setting the integer attribute, the input box will be restricted to only integers.

<z-stepper v-model="value" integer />

Disabled state

Disable the stepper by setting the disabled attribute. In the disabled state, you cannot click the button or modify the input box.

<z-stepper v-model="value" disabled />

Disable input box

Disable the input box by setting the disable-input attribute, while the button is still clickable.

<z-stepper v-model="value" disable-input />

Fixed number of decimal places

A fixed number of decimal places can be preserved by setting the decimal-length property.

<z-stepper v-model="value" step="0.2" :decimal-length="1" />

Custom size

Set the input box width through the input-width property, and set the button size and input box height through the button-size property.

<z-stepper v-model="value" input-width="80rpx" button-size="64rpx" />

Asynchronous changes

The before-change attribute can be used to verify and intercept the input value before it changes.

<z-stepper v-model="value" :before-change="beforeChange" />

import { ref } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const beforeChange = () => {
toast.showLoadingToast({ forbidClick: true })

return new Promise((resolve) => {
setTimeout(() => {
toast.closeToast()
resolve(true)
}, 1000)
})
}

Rounded corner style

Set theme to round to display a rounded style stepper.

<z-stepper v-model="value" theme="round" button-size="22" disable-input />

API

Props

Parameters	Description	Type	Default value
v-model	Current input value	number \| string	-
min	minimum value	number \| string	`1`
max	maximum value	number \| string	-
auto-fixed	Whether to automatically correct values that exceed the limit range. If set to `false`, input values that exceed the limit range will not be automatically corrected	boolean	`true`
default-value	Initial value, effective when v-model is empty	number \| string	`1`
step	Step size, the value changed each time you click	number \| string	`1`
name	Identifier, usually a unique string or number, can be obtained in the `change` event callback parameter	number \| string	-
input-width	Input box width, default unit is `px`	number \| string	`64rpx`
button-size	Button size and input box height, default unit is `px`	number \| string	`56rpx`
decimal-length	Fixed number of displayed decimal places	number \| string	-
theme	style, optional value is `round`	string	-
placeholder	Input box placeholder prompt text	string	-
integer	Whether to only allow integers to be entered	boolean	`false`
disabled	Whether to disable the stepper	boolean	`false`
disable-plus	Whether to disable the add button	boolean	`false`
disable-minus	Whether to disable the reduce button	boolean	`false`
disable-input	Whether to disable the input box	boolean	`false`
before-change	Callback function before the input value changes. Return `false` to prevent input and support returning Promise	(value: number \| string) => boolean \| Promise\	`false`
show-plus	Whether to display the add button	boolean	`true`
show-minus	Whether to display the reduce button	boolean	`true`
show-input	Whether to display the input box	boolean	`true`
long-press	Whether to enable long press gestures. After enabling, you can long press the increase and decrease buttons	boolean	`true`
allow-empty	Whether to allow the input value to be empty, set to `true` to allow empty strings to be passed in	boolean	`false`

Events

Event name	Description	Callback parameters
change	Event triggered when the binding value changes	value: string, detail: { name: string }
overlimit	Fired when an unavailable button is clicked	-
plus	Triggered when the add button is clicked	-
minus	Triggered when the reduce button is clicked	-
focus	Triggered when the input box is focused	event: Event
blur	Triggered when the input box is out of focus	event: Event

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

Name	Default	Description
--z-stepper-background	var(--z-active-color)	-
--z-stepper-button-icon-color	var(--z-text-color)	-
--z-stepper-button-disabled-color	var(--z-background)	-
--z-stepper-button-disabled-icon-color	var(--z-gray-5)	-
--z-stepper-button-round-theme-color	var(--z-primary-color)	-
--z-stepper-input-width	64rpx	-
--z-stepper-input-height	56rpx	-
--z-stepper-input-font-size	var(--z-font-size-md)	-
--z-stepper-input-line-height	normal	-
--z-stepper-input-text-color	var(--z-text-color)	-
--z-stepper-input-disabled-text-color	var(--z-text-color-3)	-
--z-stepper-input-disabled-background	var(--z-active-color)	-
--z-stepper-radius	var(--z-radius-md)	-