stepper 数量选择

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "stepper": "@retailwe/ui-stepper/index"
}

代码演示

基础用法

通过disabled属性传入是否禁用 通过value属性传入默认数量 通过min, max上设置数量最大最小值 通过绑定minus传入点击减号的事件 通过绑定plus传入点击加号的事件 通过绑定blur传入输入框失去焦点的事件 通过绑定overlimit传入数值超过范围的事件

  <stepper value="{{value}}"
    min="{{min}}"
    max="{{max}}"
    bind:minus="handleMinus"
    bind:plus="handlePlus"
    bind:overlimit="handleOverlimit"
    bind:blur="handleBlur">
  </stepper>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    disabled: false,
    min: 3,
    max: 10,
    value: 4,
  },
  handleMinus(e) {
    this.setData({
      value: e.detail.value,
    });
  },
  handlePlus(e) {
    this.setData({
      value: e.detail.value,
    });
  },
  handleOverlimit() {
    console.log('当前数量不符合规范');
  },
  handleBlur(e) {
    this.setData({
      value: e.detail.value,
    });
  },
});

API

goods-category Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | disabled | 是否禁用 | Boolean | false | - | | value | 当前数量值 | Number | 0 | - | | min | 允许最小值 | boolean | 0 | - | | max | 允许最大值 | infinity | 0 | - |

goods-category Event

| 事件名 | 说明 | 参数 | |------|------|------| | minus | 点击减号 | 当前值减一 | | plus | 点击加号 | 当前值加一 | | blur | 输入框失去焦点 | 当前输入的值 | | overlimit | 当前值超出范围 | 无 |

goods-category 外部样式类

| 类名 | 说明 | |-----------|-----------| | classname | 根节点样式类 |