介绍
步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字
引入import Vue from 'vue';
import { Stepper } from 'vant';
Vue.use(Stepper);
代码演示
基础用法
通过v-model绑定输入值,可以通过change事件监听到输入值的变化export default {
data() {
return {
value: 1
}
}
}
步长设置
通过step属性设置每次点击增加或减少按钮时变化的值,默认为1
限制输入范围
通过min和max属性限制输入值的范围
限制输入整数
设置integer属性后,输入框将限制只能输入整数
禁用状态
通过设置disabled属性来禁用步进器,禁用状态下无法点击按钮或修改输入框
禁用输入框
通过设置disabled-input属性来禁用输入框,此时按钮仍然可以点击
固定小数位数
通过设置decimal-length属性可以保留固定的小数位数
自定义大小
通过input-width属性设置输入框宽度,通过button-size属性设置按钮大小和输入框高度
异步变更
如果需要异步地修改输入框的值,可以设置async-change属性,并在change事件中手动修改value
:value="value"
async