[breaking change] Stepper: rewrite

example/pages/dashboard/config.js

@@ -75,7 +75,7 @@ export default {
         name: 'Select 选择',
         path: '/pages/select/index'
       }, {
-        name: 'Stepper 计数器',
+        name: 'Stepper 步进器',
         path: '/pages/stepper/index'
       }, {
         name: 'Switch 开关',

example/pages/stepper/index.js

@@ -1,32 +1 @@
-Page(Object.assign({}, {
+Page({});
-  data: {
-    stepper1: {
-      stepper: 10,
-      min: 1
-    },
-    stepper2: {
-      stepper: 10,
-      min: 1,
-      max: 20
-    },
-    stepper3: {
-      stepper: 10,
-      min: 1,
-      max: 20,
-      step: 2
-    }
-  },
-
-  handleZanStepperChange({
-    detail: stepper,
-    target: {
-      dataset: {
-        componentId
-      }
-    }
-  }) {
-    this.setData({
-      [`${componentId}.stepper`]: stepper
-    });
-  }
-}));

example/pages/stepper/index.json

@@ -1,6 +1,7 @@
 {
-  "navigationBarTitleText": "Stepper 计数器",
+  "navigationBarTitleText": "Stepper 步进器",
   "usingComponents": {
+    "demo-block": "../../components/demo-block/index",
     "van-stepper": "../../dist/stepper/index",
     "van-panel": "../../dist/panel/index"
   }

example/pages/stepper/index.wxml

@@ -1,60 +1,17 @@
-<van-panel title="基础用法">
+<demo-block title="基础用法">
-  <view style="padding: 40px 15px">
+  <van-stepper value="{{ value1 }}" />
-    <van-stepper
+</demo-block>
-      stepper="{{ stepper1.stepper }}"
-      min="{{ stepper1.min }}"
-      data-component-id="stepper1"
-      bind:change="handleZanStepperChange"
-    >
-    </van-stepper>
-  </view>
-</van-panel>
 
-<!-- small size -->
+<demo-block title="禁用状态">
-<van-panel title="不同尺寸-小尺寸类型">
+  <van-stepper value="{{ value1 }}" disabled />
-  <view style="padding: 40px 15px">
+</demo-block>
-    <view style="margin-bottom: 5px">small:</view>
-    <van-stepper
-      stepper="{{ stepper2.stepper }}"
-      min="{{ stepper2.min }}"
-      max="{{ stepper2.max }}"
-      size="small"
-      data-component-id="stepper2"
-      bind:change="handleZanStepperChange"
 
-    ></van-stepper>
+<demo-block title="高级用法">
-
+  <van-stepper
-    <view style="margin: 10px 0 5px;">middle:</view>
+    value="{{ value2 }}"
-    <van-stepper
+    integer
-      stepper="{{ stepper2.stepper }}"
+    min="5"
-      min="{{ stepper2.min }}"
+    max="40"
-      max="{{ stepper2.max }}"
+    step="2"
-      data-component-id="stepper2-1"
+  />
-      bind:change="handleZanStepperChange"
+</demo-block>
-    ></van-stepper>
-
-    <view style="margin: 10px 0 5px;">large:</view>
-    <van-stepper
-      stepper="{{ stepper2.stepper }}"
-      min="{{ stepper2.min }}"
-      max="{{ stepper2.max }}"
-      size="large"
-      data-component-id="stepper2-2"
-      bind:change="handleZanStepperChange"
-    ></van-stepper>
-  </view>
-</van-panel>
-
-<van-panel title="高级用法-每次变动数量自定义">
-  <view style="padding: 40px 15px">
-    <van-stepper
-      stepper="{{ stepper3.stepper }}"
-      min="{{ stepper3.min }}"
-      max="{{ stepper3.max }}"
-      step="{{ stepper3.step }}"
-      data-component-id="stepper3"
-      bind:change="handleZanStepperChange"
-    >
-    </van-stepper>
-  </view>
-</van-panel>

packages/stepper/README.md

@@ -1,73 +1,72 @@
-## Stepper 计数器
+## Stepper 步进器
 
 ### 使用指南
+
 在 index.json 中引入组件
 ```json
-{
+"usingComponents": {
-  "usingComponents": {
+  "van-stepper": "path/to/vant-weapp/dist/stepper/index"
-    "van-stepper": "path/to/vant-weapp/dist/stepper/index"
-  }
 }
 ```
 
 ### 代码演示
 
 #### 基础用法
-`Stepper` 组件通过传入的 stepper 对象控制，内部数据格式如下：
-```js
-Page({
-  data: {
-    stepper: {
-      // 当前 stepper 数字
-      stepper: 1,
-      // 最小可到的数字
-      min: 1,
-      // 最大可到的数字
-      max: 1,
-      // 尺寸
-      size: 'small'
-    }
-  },
 
-  handleZanStepperChange({
+```html
-    // stepper 代表操作后，应该要展示的数字，需要设置到数据对象里，才会更新页面展示
+<van-stepper value="{{ 1 }}" bind:change="onChange" />
-    detail: stepper
-  }) {
-    this.setData({
-      'stepper.stepper': stepper
-    });
-  }
-});
 ```
 
-当一个 `Stepper` 中，min 超过 max，就会导致组件被置灰。
+#### 禁用状态
 
-当 stepper 被点击时，需要监听`change`事件，处理计数器值的改变。
+通过设置`disabled`属性来禁用 stepper
 
-```js
+```html
+<van-stepper value="{{ 1 }}" disabled bind:change="onChange" />
+```
+
+#### 高级用法
+
+默认是每次加减为1，可以对组件设置`step`、`min`、`max`属性
+
+```html
 <van-stepper
-  stepper="{{ stepper.stepper }}"
+  value="{{ value }}"
-  min="{{ stepper.min }}"
+  integer
-  max="{{ stepper.max }}"
+  min="5"
-  bind:change="handleZanStepperChange"
+  max="40"
->
+  step="2"
-</van-stepper>
+  bind:change="onChange"
+/>
 ```
 
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 必须      |
+| 参数 | 说明 | 类型 | 默认值 |
-|-----------|-----------|-----------|-------------|-------------|
+|-----------|-----------|-----------|-------------|
-| size | 计数器尺寸：small、middle、large | String | middle | |
+| value | 输入值 | `String | Number` | 最小值 |
-| stepper | 计数器的值 | Number | `1` | 必须 |
+| min | 最小值 | `String | Number` | `1` |
-| min | 计数器最小值 | Number | `1` | |
+| max | 最大值 | `String | Number` | - |
-| max | 计数器最大值 | Number | 无穷大 | |
+| step | 步数 | `String | Number` | `1` |
-| step | 步数 | Number | `1` | |
+| integer | 是否只允许输入整数 | `Boolean` | `false` |
+| disabled | 是否禁用 | `Boolean` | `false` |
+| disable-input | 是否禁用input框 | `Boolean` | `false` |
 
 ### Event
 
-| 事件名称       | 说明      | 回调参数       |
+| 事件名称 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
-| change | 当绑定值变化时触发的事件 | `{ index, stepper }` |
+| change | 当绑定值变化时触发的事件 | event.detail: 当前输入的值 |
-| minus | 点击减少按钮时触发 | - |
+| overlimit | 点击不可用的按钮时触发 | - |
 | plus | 点击增加按钮时触发 | - |
+| minus | 点击减少按钮时触发 | - |
+| blur | 输入框失焦时触发 | - |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| input-class | 输入框样式类 |
+| plus-class | 加号按钮样式类 |
+| minus-class | 减号按钮样式类 |

packages/stepper/index.js

@@ -1,79 +1,88 @@
 // Note that the bitwise operators and shift operators operate on 32-bit ints
 // so in that case, the max safe integer is 2^31-1, or 2147483647
-const VERY_LARGE_NUMBER = 2147483647;
+const MAX = 2147483647;
 
 Component({
+  externalClasses: [
+    'custom-class',
+    'input-class',
+    'plus-class',
+    'minus-class'
+  ],
+
   properties: {
-    size: {
+    value: {
-      type: String,
+      type: null,
-      value: 'middle'
+      observer(val) {
-    },
+        if (val !== this.currentValue) {
-    stepper: {
+          this.setData({ currentValue: this.range(val) });
-      type: Number,
+        }
-      value: 1
+      }
     },
+    integer: Boolean,
+    disabled: Boolean,
+    disableInput: Boolean,
     min: {
-      type: Number,
+      type: null,
       value: 1
     },
     max: {
-      type: Number,
+      type: null,
-      value: VERY_LARGE_NUMBER
+      value: MAX
     },
     step: {
-      type: Number,
+      type: null,
       value: 1
     }
   },
 
+  attached() {
+    this.setData({
+      currentValue: this.range(this.data.value)
+    });
+  },
+
   methods: {
-    handleZanStepperChange(e, type) {
+    // limit value range
-      const { dataset = {} } = e.currentTarget;
+    range(value) {
-      const { disabled } = dataset;
+      return Math.max(Math.min(this.data.max, value), this.data.min);
-      const { step } = this.data;
-      let { stepper } = this.data;
-
-      if (disabled) return null;
-
-      if (type === 'minus') {
-        stepper -= step;
-      } else if (type === 'plus') {
-        stepper += step;
-      }
-
-      if (stepper < this.data.min || stepper > this.data.max) return null;
-
-      this.triggerEvent('change', stepper);
-      this.triggerEvent(type);
     },
 
-    handleZanStepperMinus(e) {
+    onInput(event) {
-      this.handleZanStepperChange(e, 'minus');
+      const { value = '' } = event.detail || {};
+      this.triggerInput(value);
     },
 
-    handleZanStepperPlus(e) {
+    onChange(type) {
-      this.handleZanStepperChange(e, 'plus');
+      if (this[`${type}Disabled`]) {
-    },
+        this.triggerEvent('overlimit', type);
-
-    handleZanStepperBlur(e) {
-      let { value } = e.detail;
-      const { min, max } = this.data;
-
-      if (!value) {
-        setTimeout(() => {
-          this.triggerEvent('change', min);
-        }, 16);
         return;
       }
 
-      value = +value;
+      const diff = type === 'minus' ? -this.data.step : +this.data.step;
-      if (value > max) {
+      const value = Math.round((this.data.currentValue + diff) * 100) / 100;
-        value = max;
+      this.triggerInput(this.range(value));
-      } else if (value < min) {
+      this.triggerEvent(type);
-        value = min;
+    },
-      }
 
-      this.triggerEvent('change', value);
+    onBlur(event) {
+      const currentValue = this.range(this.data.currentValue);
+      this.triggerInput(currentValue);
+      this.triggerEvent('blur', event);
+    },
+
+    onMinus() {
+      this.onChange('minus');
+    },
+
+    onPlus() {
+      this.onChange('plus');
+    },
+
+    triggerInput(currentValue) {
+      this.setData({ currentValue });
+      this.triggerEvent('input', currentValue);
+      this.triggerEvent('change', currentValue);
     }
   }
 });

packages/stepper/index.pcss

@@ -1,63 +1,93 @@
+@import '../helper/index.pcss';
+
 .van-stepper {
-  color: #666;
+  font-size: 0;
-}
-.van-stepper view {
-  display: inline-block;
-  padding: 5px 0;
-  text-align: center;
-  box-sizing: border-box;
-  vertical-align: middle;
-  font-size: 12px;
-  border: 1rpx solid #999;
-}
-.van-stepper .van-stepper__minus {
-  border-right: none;
-  border-radius: 2px 0 0 2px;
-}
-.van-stepper .van-stepper__text {
-  border: 1rpx solid #999;
-  display: inline-block;
-  text-align: center;
-  vertical-align: middle;
-  /* 重置 input 默认样式 */
-  min-height: auto;
-  font-size: 12px;
-}
-.van-stepper .van-stepper__plus {
-  border-left: none;
-  border-radius: 0 2px 2px 0;
-}
-.van-stepper .van-stepper--disabled {
-  background: #f8f8f8;
-  color: #bbb;
-  border-color: #e8e8e8;
-}
-.van-stepper--small view {
-  min-width: 36px;
-  line-height: 18px;
-}
-.van-stepper--small .van-stepper__text {
-  width: 36px;
-  line-height: 28px;
-  height: 28px;
-}
 
-.van-stepper--middle view {
+  &__minus,
-  min-width: 40px;
+  &__plus,
-  line-height: 20px;
+  &__input {
-}
+    display: inline-block;
-.van-stepper--middle .van-stepper__text {
+    vertical-align: middle;
-  width: 40px;
+    background-color: $white;
-  line-height: 30px;
+  }
-  height: 30px;
-}
 
-.van-stepper--large view {
+  &__minus,
-  min-width: 44px;
+  &__plus {
-  line-height: 22px;
+    width: 40px;
-}
+    height: 30px;
-.van-stepper--large .van-stepper__text {
+    box-sizing: border-box;
-  width: 44px;
+    border: 1px solid $border-color;
-  line-height: 32px;
+    position: relative;
-  height: 32px;
+    padding: 5px;
+
+    &::before {
+      width: 9px;
+      height: 1px;
+    }
+
+    &::after {
+      width: 1px;
+      height: 9px;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #6c6c6c;
+    }
+
+    &:active {
+      background-color: $active-color;
+    }
+
+    &--disabled {
+      background-color: $background-color;
+
+      &::before,
+      &::after {
+        background-color: $gray;
+      }
+    }
+
+    &--disabled:active {
+      background-color: $background-color;
+    }
+  }
+
+  &__minus {
+    border-radius: 2px 0 0 2px;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  &__plus {
+    border-radius: 0 2px 2px 0;
+  }
+
+  &__input {
+    width: 33px;
+    height: 26px;
+    padding: 1px;
+    border: 1px solid $border-color;
+    border-width: 1px 0;
+    border-radius: 0;
+    box-sizing: content-box;
+    color: $gray-darker;
+    font-size: 14px;
+    text-align: center;
+    -webkit-appearance: none;
+
+    &--disabled {
+      color: $gray;
+      background-color: $background-color;
+    }
+  }
 }

packages/stepper/index.wxml

@@ -1,23 +1,18 @@
-<view class="van-stepper van-stepper--{{ size }}">
+<view class="van-stepper custom-class">
   <view
-    class="van-stepper__minus {{ stepper <= min ? 'van-stepper--disabled' : '' }}"
+    class="minus-class van-stepper__minus {{ disabled || currentValue <= min ? 'van-stepper__minus--disabled' : '' }}"
-    data-disabled="{{ stepper <= min }}"
+    bind:tap="onMinus"
-    bindtap="handleZanStepperMinus"
+  />
-  >
-    -
-  </view>
   <input
-    class="van-stepper__text {{ min >= max ? 'van-stepper--disabled' : '' }}"
+    type="{{ integer ? 'number' : 'digit' }}"
-    type="number"
+    class="input-class van-stepper__input {{ disabled || disableInput ? 'van-stepper__input--disabled' : '' }}"
-    value="{{ stepper }}"
+    value="{{ currentValue }}"
-    disabled="{{ min >= max }}"
+    disabled="{{ disabled || disableInput }}"
-    bindblur="handleZanStepperBlur"
+    bindinput="onInput"
+    bind:blur="onBlur"
   />
   <view
-    class="van-stepper__plus {{ stepper >= max ? 'van-stepper--disabled' : '' }}"
+    class="plus-class van-stepper__plus {{ disabled || currentValue >= max ? 'van-stepper__plus--disabled' : '' }}"
-    data-disabled="{{ stepper >= max }}"
+    bind:tap="onPlus"
-    bindtap="handleZanStepperPlus"
+  />
-  >
-    +
-  </view>
 </view>