vant-weapp/packages/stepper/README.md

Stepper 计数器

使用指南

在 index.json 中引入组件

{
  "usingComponents": {
    "zan-stepper": "path/to/zanui-weapp/dist/stepper/index"
  }
}

代码演示

基础用法

Stepper 组件通过传入的 stepper 对象控制，内部数据格式如下：

Page({
  data: {
    stepper: {
      // 当前 stepper 数字
      stepper: 1,
      // 最小可到的数字
      min: 1,
      // 最大可到的数字
      max: 1
    }
  },

  handleZanStepperChange({

    // stepper 代表操作后，应该要展示的数字，需要设置到数据对象里，才会更新页面展示
    detail: stepper,

    // 模板中传入的 componentId，用于区分一个页面上的多个stepper
    target: {
      dataset: {
        componentId
      }
    }
  }) {
    this.setData({
      [`${componentId}.stepper`]: stepper
    });
  }
});

当一个 Stepper 中，min 超过 max，就会导致组件被置灰。

当 stepper 被点击时，需要监听change事件，处理计数器值的改变。

<zan-stepper
  stepper="{{ stepper.stepper }}"
  min="{{ stepper.min }}"
  max="{{ stepper.max }}"
  component-id="stepper"
  bind:change="handleZanStepperChange"
>
</zan-stepper>

API

参数	说明	类型	默认值	必须
size	计数器尺寸	String	-
stepper	计数器的值	Number	1	必须
min	计数器最小值	Number	1
max	计数器最大值	Number	无穷大
step	步数	Number	1
componentId	用于区分输入框之间的唯一名称	String	-

Event

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	{ index, stepper }
minus	点击减少按钮时触发	-
plus	点击增加按钮时触发	-