[bugfix] Stepper: 修复iPad下或修改input高度时输入框样式异常 (#1086)

example/pages/stepper/index.wxss

@@ -1 +1 @@
-/* pages/stepper/index.wxss */
+/* pages/stepper/index.wxss */

packages/stepper/index.less

@@ -5,7 +5,7 @@
 
   &__minus,
   &__plus,
-  &__input {
+  &__input-wrapper {
     display: inline-block;
     vertical-align: middle;
     background-color: @white;
@@ -13,12 +13,12 @@
 
   &__minus,
   &__plus {
+    position: relative;
     width: 40px;
     height: 30px;
-    box-sizing: border-box;
-    border: 1px solid @border-color;
-    position: relative;
     padding: 5px;
+    border: 1px solid @border-color;
+    box-sizing: border-box;
 
     &::before {
       width: 9px;
@@ -32,14 +32,14 @@
 
     &::before,
     &::after {
-      content: '';
       position: absolute;
-      margin: auto;
       top: 0;
-      left: 0;
       right: 0;
       bottom: 0;
+      left: 0;
+      margin: auto;
       background-color: @gray-darker;
+      content: '';
     }
 
     &:active {
@@ -72,23 +72,32 @@
     border-radius: 0 2px 2px 0;
   }
 
-  &__input {
-    width: 33px;
-    height: 26px;
+  &__input-wrapper {
+    position: relative;
+    width: 35px;
+    height: 30px;
     padding: 1px;
-    min-height: 0; // reset wechat default min height
+    font-size: 14px;
+    color: @gray-darker;
+    text-align: center;
     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;
+    box-sizing: border-box;
 
     &--disabled {
       color: @gray;
       background-color: @background-color;
     }
   }
+
+  &__input {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    min-height: 0; // reset wechat default min height
+    transform: translate3d(-50%, -50%, 0);
+    appearance: none;
+  }
 }

packages/stepper/index.ts

@@ -50,6 +50,10 @@ VantComponent({
     }
   },
 
+  data: {
+    focus: false
+  },
+
   created() {
     this.set({
       value: this.range(this.data.value)
@@ -57,6 +61,12 @@ VantComponent({
   },
 
   methods: {
+    onFocus() {
+      this.setData({
+        focus: true
+      });
+    },
+
     // limit value range
     range(value) {
       return Math.max(Math.min(this.data.max, value), this.data.min);

packages/stepper/index.wxml

@@ -3,14 +3,17 @@
     class="minus-class van-stepper__minus {{ minusDisabled ? '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="{{ value }}"
-    disabled="{{ disabled || disableInput }}"
-    bindinput="onInput"
-    bind:blur="onBlur"
-  />
+  <view class="input-class van-stepper__input-wrapper {{ disabled || disableInput ? 'van-stepper__input-wrapper--disabled' : '' }}" bindtap="onFocus">
+    <input
+      type="{{ integer ? 'number' : 'digit' }}"
+      class="van-stepper__input"
+      value="{{ value }}"
+      focus="{{ focus }}"
+      disabled="{{ disabled || disableInput }}"
+      bindinput="onInput"
+      bind:blur="onBlur"
+    />
+  </view>
   <view
     class="plus-class van-stepper__plus {{ plusDisabled ? 'van-stepper__plus--disabled' : '' }}"
     bind:tap="onPlus"