Stepper 步进器

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-stepper": "path/to/vant-weapp/dist/stepper/index"
  3. }

代码演示

基础用法

  1. <van-stepper value="{{ 1 }}" bind:change="onChange" />

禁用状态

通过设置disabled属性来禁用 stepper

  1. <van-stepper value="{{ 1 }}" disabled bind:change="onChange" />

高级用法

默认是每次加减为1，可以对组件设置step、min、max属性

  1. <van-stepper
  2.   value="{{ value }}"
  3.   integer
  4.   min="5"
  5.   max="40"
  6.   step="2"
  7.   bind:change="onChange"
  8. />

API

参数说明类型默认值
name在表单内提交时的标识符String-
value输入值String | Number最小值
min最小值String | Number1
max最大值String | Number-
step步数String | Number1
integer是否只允许输入整数Booleanfalse
disabled是否禁用Booleanfalse
disable-input是否禁用input框Booleanfalse
async-change异步变更，为 true 时input值不变化，仅触发事件Booleanfalse

Event

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

外部样式类

类名说明
custom-class根节点样式类
input-class输入框样式类
plus-class加号按钮样式类
minus-class减号按钮样式类

更新日志

版本类型内容
0.0.1feature新增组件
0.2.1feature支持在原生 form 组件内使用
0.3.8bugfix修复 disabled 状态下仍然可以点击的问题

原文: https://youzan.github.io/vant-weapp/#/stepper