feat(Stepper): add input-widht、button-size props, support long tap gesture

example/pages/overlay/index.wxss

@@ -0,0 +1 @@
+/* pages/overlay/index.wxss */

packages/stepper/README.md

@@ -29,7 +29,7 @@ Page({
   onChange(event) {
     console.log(event.detail);
   }
-})
+});
 ```
 
 ### 步长设置
@@ -69,11 +69,7 @@ Page({
 如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`
 
 ```html
-<van-stepper
+<van-stepper value="{{ value }}" async-change bind:change="onChange" />
-  value="{{ value }}"
-  async-change
-  bind:change="onChange"
-/>
 ```
 
 ```js
@@ -98,11 +94,7 @@ Page({
 通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度
 
 ```html
-<van-stepper
+<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
-  value="{{ 1 }}"
-  input-width="40px"
-  button-size="32px"
-/>
 ```
 
 ## API
@@ -110,24 +102,27 @@ Page({
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-|-----------|-----------|-----------|-------------|-------------|
+| --- | --- | --- | --- | --- |
-| name | 在表单内提交时的标识符 | *string* | - | - |
+| name | 在表单内提交时的标识符 | _string_ | - | - |
-| value | 输入值 | *string \| number* | 最小值 | - |
+| value | 输入值 | _string \| number_ | 最小值 | - |
-| min | 最小值 | *string \| number* | `1` | - |
+| min | 最小值 | _string \| number_ | `1` | - |
-| max | 最大值 | *string \| number* | - | - |
+| max | 最大值 | _string \| number_ | - | - |
-| step | 步长 | *string \| number* | `1` | - |
+| step | 步长 | _string \| number_ | `1` | - |
-| integer | 是否只允许输入整数 | *boolean* | `false` | - |
+| integer | 是否只允许输入整数 | _boolean_ | `false` | - |
-| disabled | 是否禁用 | *boolean* | `false` | - |
+| disabled | 是否禁用 | _boolean_ | `false` | - |
-| disable-input | 是否禁用输入框 | *boolean* | `false` | - |
+| disable-input | 是否禁用输入框 | _boolean_ | `false` | - |
-| async-change | 是否开启异步变更，开启后需要手动控制输入值 | *boolean* | `false` | - |
+| async-change | 是否开启异步变更，开启后需要手动控制输入值 | _boolean_ | `false` | - |
-| input-width | 输入框宽度，须指定单位 | *string* | `30px` | - |
+| input-width | 输入框宽度，默认单位为 `px` | _string \| number_ | `32px` | - |
-| show-plus | 是否显示增加按钮 | *boolean* | `true` | - |
+| button-size | 按钮大小，默认单位为 `px`，输入框高度会和按钮大小保持一致 | _string \| number_ | `28px` | - |
-| show-minus | 是否显示减少按钮 | *boolean* | `true` | - |
+| show-plus | 是否显示增加按钮 | _boolean_ | `true` | - |
+| show-minus | 是否显示减少按钮 | _boolean_ | `true` | - |
+
+ååå
 
 ### Events
 
 | 事件名         | 说明                     | 回调参数                   |
-|-----------|-----------|-----------|
+| -------------- | ------------------------ | -------------------------- |
 | bind:change    | 当绑定值变化时触发的事件 | event.detail: 当前输入的值 |
 | bind:overlimit | 点击不可用的按钮时触发   | -                          |
 | bind:plus      | 点击增加按钮时触发       | -                          |
@@ -138,7 +133,7 @@ Page({
 ### 外部样式类
 
 | 类名         | 说明           |
-|-----------|-----------|
+| ------------ | -------------- |
 | custom-class | 根节点样式类   |
 | input-class  | 输入框样式类   |
 | plus-class   | 加号按钮样式类 |

packages/stepper/index.less

@@ -70,9 +70,12 @@
 
   &__input {
     display: inline-block;
-    box-sizing: content-box;
+    box-sizing: border-box;
-    width: 30px;
+    // 覆盖 common style 中 input 的 min-height: 1.4rem;
-    height: 26px;
+    // 避免 button-size 对 input 设置的 height 不生效
+    min-height: 0;
+    width: 32px;
+    height: 28px;
     margin: 1px;
     padding: 1px;
     color: @text-color;

packages/stepper/index.ts

@@ -1,20 +1,21 @@
 import { VantComponent } from '../common/component';
 import { Weapp } from 'definitions/weapp';
+import { addUnit } from '../common/utils';
+
+const LONG_PRESS_START_TIME = 600;
+const LONG_PRESS_INTERVAL = 200;
 
 VantComponent({
   field: true,
 
-  classes: [
+  classes: ['input-class', 'plus-class', 'minus-class'],
-    'input-class',
-    'plus-class',
-    'minus-class'
-  ],
 
   props: {
     value: null,
     integer: Boolean,
     disabled: Boolean,
-    inputWidth: String,
+    inputWidth: null,
+    buttonSize: null,
     asyncChange: Boolean,
     disableInput: Boolean,
     min: {
@@ -50,11 +51,26 @@ VantComponent({
       if (typeof newValue === 'number' && +this.data.value !== newValue) {
         this.setData({ value: newValue });
       }
+    },
+
+    inputWidth() {
+      this.set({
+        inputStyle: this.computeInputStyle()
+      });
+    },
+
+    buttonSize() {
+      this.set({
+        inputStyle: this.computeInputStyle(),
+        buttonStyle: this.computeButtonStyle()
+      });
     }
   },
 
   data: {
-    focus: false
+    focus: false,
+    inputStyle: '',
+    buttonStyle: ''
   },
 
   created() {
@@ -93,7 +109,8 @@ VantComponent({
       this.triggerInput(value);
     },
 
-    onChange(type: string) {
+    onChange() {
+      const { type } = this;
       if (this.isDisabled(type)) {
         this.$emit('overlimit', type);
         return;
@@ -105,12 +122,35 @@ VantComponent({
       this.$emit(type);
     },
 
-    onMinus() {
+    longPressStep() {
-      this.onChange('minus');
+      this.longPressTimer = setTimeout(() => {
+        this.onChange();
+        this.longPressStep();
+      }, LONG_PRESS_INTERVAL);
     },
 
-    onPlus() {
+    onTap(event: Weapp.Event) {
-      this.onChange('plus');
+      const { type } = event.currentTarget.dataset;
+      this.type = type;
+      this.onChange();
+    },
+
+    onTouchStart(event: Weapp.Event) {
+      clearTimeout(this.longPressTimer);
+
+      const { type } = event.currentTarget.dataset;
+      this.type = type;
+      this.isLongPress = false;
+
+      this.longPressTimer = setTimeout(() => {
+        this.isLongPress = true;
+        this.onChange();
+        this.longPressStep();
+      }, LONG_PRESS_START_TIME);
+    },
+
+    onTouchEnd() {
+      clearTimeout(this.longPressTimer);
     },
 
     triggerInput(value: string) {
@@ -118,6 +158,31 @@ VantComponent({
         value: this.data.asyncChange ? this.data.value : value
       });
       this.$emit('change', value);
+    },
+
+    computeInputStyle() {
+      let style = '';
+
+      if (this.data.inputWidth) {
+        style = `width: ${addUnit(this.data.inputWidth)};`;
+      }
+
+      if (this.data.buttonSize) {
+        style += `height: ${addUnit(this.data.buttonSize)};`;
+      }
+
+      return style;
+    },
+
+    computeButtonStyle() {
+      let style = '';
+      const size = addUnit(this.data.buttonSize);
+
+      if (this.data.buttonSize) {
+        style = `width: ${size};height: ${size};`;
+      }
+
+      return style;
     }
   }
 });

packages/stepper/index.wxml

@@ -2,16 +2,20 @@
 
 <view class="van-stepper custom-class">
   <view
+    wx:if="{{ showMinus }}"
+    data-type="minus"
+    style="{{ buttonStyle }}"
     class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || value <= min }) }}"
-    style="{{ showMinus ? '' : 'display: none;' }}"
     hover-class="van-stepper__minus--hover"
     hover-stay-time="70"
-    bind:tap="onMinus"
+    bind:tap="onTap"
+    bind:touchstart="onTouchStart"
+    bind:touchend="onTouchEnd"
   />
   <input
     type="{{ integer ? 'number' : 'digit' }}"
     class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
-    style="{{ inputWidth ? 'width: ' + inputWidth : '' }}"
+    style="{{ inputStyle }}"
     value="{{ value }}"
     focus="{{ focus }}"
     disabled="{{ disabled || disableInput }}"
@@ -20,10 +24,14 @@
     bind:blur="onBlur"
   />
   <view
+    wx:if="{{ showPlus }}"
+    data-type="plus"
+    style="{{ buttonStyle }}"
     class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || value >= max }) }}"
-    style="{{ showPlus ? '' : 'display: none;' }}"
     hover-class="van-stepper__plus--hover"
     hover-stay-time="70"
-    bind:tap="onPlus"
+    bind:tap="onTap"
+    bind:touchstart="onTouchStart"
+    bind:touchend="onTouchEnd"
   />
 </view>