Vant Stepper 步进器
步进器由按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字
import Vue from 'vue'; import { Stepper } from 'vant'; Vue.use(Stepper);
通过v-model绑定输入值,可以通过change事件监听到输入值的变化
<van-stepper v-model="value" />
export default { data() { return { value: 1 } } }
通过step设置每次点击或减少按钮时变化的值,认为1
<van-stepper v-model="value" step="2" />
通过min和max限制输入值的范围
<van-stepper v-model="value" min="5" max="8" />
设置integer后,输入框将限制只能输入整数
<van-stepper v-model="value" integer />
通过设置disabled来禁用步进器,禁用状态下无法点击按钮或输入框
<van-stepper v-model="value" disabled />
通过设置disabled-input来禁用输入框,此时按钮仍然可以点击
<van-stepper v-model="value" disabled-input />
通过设置decimal-length可以保留固定的小数位数
<van-stepper v-model="value" step="0.2" :decimal-length="1" />
通过input-width设置输入框宽度,通过button-size设置按钮大小和输入框高度
<van-stepper v-model="value" input-width="40px" button-size="32px" />
如果需要异步地输入框的值,可以设置async-change,并在change事件中手动value
<van-stepper :value="value" async-change @change="onChange" />
import { Toast } from 'vant'; export default { data() { return { value: 1 } }, methods: { onChange(value) { Toast.loading({ forbidClick: true }); setTimeout(() => { Toast.clear(); // 注意此时 value 后会再次触发 change 事件 this.value = value; }, 500); } } }