Stepper
Install
import { Stepper } from 'vant';
Vue.use(Stepper);
Usage
Basic Usage
<van-stepper v-model="value" />
export default {
data() {
return {
value: 1
}
}
}
Disabled
<van-stepper v-model="value" disabled />
Async Change
<van-stepper
:value="value"
async-change
@change="onChange"
/>
export default {
data() {
return {
value: 1
}
},
methods: {
onChange(value) {
if (this.changing) {
return;
}
this.changing = true;
setTimeout(() => {
this.value = value;
this.changing = false;
}, 500);
}
}
}
Advanced Usage
<van-stepper
v-model="value"
integer
:min="5"
:max="40"
:step="2"
:default-value="9"
/>
API
| Attribute |
Description |
Type |
Default |
| v-model |
Current value |
`String |
Number` |
| min |
Min value |
`String |
Number` |
| max |
Max value |
`String |
Number` |
| step |
Value change step |
`String |
Number` |
| integer |
Whether to allow only integers |
Boolean |
false |
| disabled |
Disable value change |
Boolean |
false |
| disable-input |
Disable input |
Boolean |
false |
| async-change |
Whether to enable async change |
Boolean |
false |
| input-width |
Input width |
String |
30px |
Event
| Event |
Description |
Arguments |
| change |
Triggered when value change |
value: current value |
| overlimit |
Triggered when click disabled button |
- |
| plus |
Triggered when click plus button |
- |
| minus |
Triggered when click minus button |
- |
| focus |
Triggered when input focused |
- |
| blur |
Triggered when input blured |
- |