Stepper 步进器

使用指南

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

代码演示

基础用法

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

禁用状态

通过设置disabled属性来禁用 stepper

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

高级用法

默认是每次加减为1,可以对组件设置stepminmaxdefault-value属性

  1. <van-stepper
  2. v-model="value"
  3. integer
  4. :min="5"
  5. :max="40"
  6. :step="2"
  7. :default-value="9"
  8. />

API

参数 说明 类型 默认值
min 最小值 String Number 1
max 最大值 String Number -
default-value 默认值 String Number 1
step 步数 String Number 1
integer 是否只允许输入整数 Boolean false
disabled 是否禁用 Boolean false
disable-input 是否禁用input框 Boolean false

Event

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

原文:

https://youzan.github.io/vant/#/zh-CN/stepper