@retailwe/ui-stepper NPM

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,
    });
  },
});