Vant Stepper 步进器运用

发布时间：2023-04-20 11:36:32 所属栏目：教程来源：

导读：步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字

引入
import Vue from 'vue';
import { Stepper } from 'vant';

Vue.use(Stepper);
基础用法
通过v-model绑定

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字

引入
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);
}
}
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!