Stepper - Vant 4

Stepper

Intro

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

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Stepper } from'vant'; const app = createApp(); app.use(Stepper);

Usage

Basic Usage

import { ref } from'vue'; exportdefault { setup() { const value = ref(1); return { value }; }, };

Step

Range

Integer

Disabled

Disable Input

Decimal Length

Custom Size

Before Change

import { ref } from'vue'; import { closeToast, showLoadingToast } from'vant'; exportdefault { setup() { const value = ref(1); constbeforeChange = (value) => { showLoadingToast({ forbidClick: true }); returnnewPromise((resolve) => { setTimeout(() => { closeToast(); // resolve 'true' or 'false'resolve(true); }, 500); }); }; return { value, beforeChange, }; }, };

Round Theme

API

Props

Attribute	Description	Type	Default
v-model	Current value	*number	string*
min	Min value	*number	string*
max	Max value	*number	string*
auto-fixed	Whether to auto fix value that is out of range, set to false and value that is out of range won��t be auto fixed	boolean	true
default-value	Default value, valid when v-model is empty	*number	string*
step	Value change step	*number	string*
name	Stepper name, usually a unique string or number	*number	string*
input-width	Input width	*number	string*
button-size	Button size	*number	string*
decimal-length	Decimal length	*number	string*
theme	Theme, can be set to round	string	-
placeholder	Input placeholder	string	-
integer	Whether to allow only integers	boolean	false
disabled	Whether to disable value change	boolean	false
disable-plus	Whether to disable plus button	boolean	false
disable-minus	Whether to disable minus button	boolean	false
disable-input	Whether to disable input	boolean	false
before-change	Callback function before changing, return false to prevent change, support return Promise	*(value: number	string) => boolean
show-plus	Whether to show plus button	boolean	true
show-minus	Whether to show minus button	boolean	true
show-input	Whether to show input	boolean	true
long-press	Whether to enable the long press gesture, when enabled 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 an empty string to be passed in	boolean	false

Events

Event	Description	Arguments
change	Emitted when value changed	value: string, detail: { name: string }
overlimit	Emitted when a disabled button is clicked	-
plus	Emitted when the plus button is clicked	-
minus	Emitted when the minus button is clicked	-
focus	Emitted when the input is focused	event: Event
blur	Emitted when the input is blurred	event: Event

Types

The component exports the following type definitions:

importtype { StepperTheme, StepperProps } from'vant';

Theming

CSS Variables

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

Name	Default Value	Description
--van-stepper-background	var(--van-active-color)	-
--van-stepper-button-icon-color	var(--van-text-color)	-
--van-stepper-button-disabled-color	var(--van-background)	-
--van-stepper-button-disabled-icon-color	var(--van-gray-5)	-
--van-stepper-button-round-theme-color	var(--van-primary-color)	-
--van-stepper-input-width	32px	-
--van-stepper-input-height	28px	-
--van-stepper-input-font-size	var(--van-font-size-md)	-
--van-stepper-input-line-height	normal	-
--van-stepper-input-text-color	var(--van-text-color)	-
--van-stepper-input-disabled-text-color	var(--van-text-color-3)	-
--van-stepper-input-disabled-background	var(--van-active-color)	-
--van-stepper-radius	var(--van-radius-md)	-