Stepper 步进器

引入

  1. import{Stepper}from'vant';
  2. Vue.use(Stepper);

代码演示

基础用法

  1. <van-stepperv-model="value"/>
  1. exportdefault{
  2. data(){
  3. return{
  4. value:1
  5. }
  6. }
  7. }

步长设置

  1. <van-stepperv-model="value"step="2"/>

限制输入范围

  1. <van-stepperv-model="value"min="5"max="8"/>

限制输入整数

  1. <van-stepperv-model="value"integer/>

禁用状态

通过设置disabled属性来禁用 stepper

  1. <van-stepperv-model="value"disabled/>

异步变更

  1. <van-stepper
  2. :value="value"
  3. async-change
  4. @change="onChange"
  5. />
  1. exportdefault{
  2. data(){
  3. return{
  4. value:1
  5. }
  6. },
  7. methods:{
  8. onChange(value){
  9. if(this.changing){
  10. return;
  11. }
  12. this.changing =true;
  13. setTimeout(()=>{
  14. this.value = value;
  15. this.changing =false;
  16. },500);
  17. }
  18. }
  19. }

API

Props

参数说明类型默认值版本
v-model当前输入值String | Number最小值-
min最小值String | Number1-
max最大值String | Number--
step步数String | Number1-
integer是否只允许输入整数Booleanfalse1.1.1
disabled是否禁用步进器Booleanfalse-
disable-input是否禁用输入框Booleanfalse-
async-change是否开启异步变更,开启后需要手动控制输入值Booleanfalse-
input-width输入框宽度,默认单位为pxString | Number30px1.6.13

Events

事件名说明回调参数
change当绑定值变化时触发的事件当前组件的值
overlimit点击不可用的按钮时触发-
plus点击增加按钮时触发-
minus点击减少按钮时触发-
focus输入框聚焦时触发-
blur输入框失焦时触发-

Stepper 步进器 - 图1