[improvement] Stepper: support form-field (#477)

packages/field/README.md

@@ -123,7 +123,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|-------------|
-| name | 标识符 | `String` | - |
+| name | 在表单内提交时的标识符 | `String` | - |
 | label | 输入框左侧文本 | `String` | - |
 | value | 当前输入的值 | `String | Number` | - |
 | type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | `String` | `text` |

packages/stepper/README.md

@@ -44,6 +44,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
+| name | 在表单内提交时的标识符 | `String` | - |
 | value | 输入值 | `String | Number` | 最小值 |
 | min | 最小值 | `String | Number` | `1` |
 | max | 最大值 | `String | Number` | - |

packages/stepper/index.js

@@ -3,6 +3,8 @@
 const MAX = 2147483647;
 
 Component({
+  behaviors: ['wx://form-field'],
+
   options: {
     addGlobalClass: true
   },
@@ -15,14 +17,6 @@ Component({
   ],
 
   properties: {
-    value: {
-      type: null,
-      observer(val) {
-        if (val !== this.currentValue) {
-          this.setData({ currentValue: this.range(val) });
-        }
-      }
-    },
     integer: Boolean,
     disabled: Boolean,
     disableInput: Boolean,
@@ -42,7 +36,7 @@ Component({
 
   attached() {
     this.setData({
-      currentValue: this.range(this.data.value)
+      value: this.range(this.data.value)
     });
   },
 
@@ -64,14 +58,14 @@ Component({
       }
 
       const diff = type === 'minus' ? -this.data.step : +this.data.step;
-      const value = Math.round((this.data.currentValue + diff) * 100) / 100;
+      const value = Math.round((this.data.value + diff) * 100) / 100;
       this.triggerInput(this.range(value));
       this.triggerEvent(type);
     },
 
     onBlur(event) {
-      const currentValue = this.range(this.data.currentValue);
+      const value = this.range(this.data.value);
-      this.triggerInput(currentValue);
+      this.triggerInput(value);
       this.triggerEvent('blur', event);
     },
 
@@ -83,10 +77,9 @@ Component({
       this.onChange('plus');
     },
 
-    triggerInput(currentValue) {
+    triggerInput(value) {
-      this.setData({ currentValue });
+      this.setData({ value });
-      this.triggerEvent('input', currentValue);
+      this.triggerEvent('change', value);
-      this.triggerEvent('change', currentValue);
     }
   }
 });

packages/stepper/index.wxml

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