[new feature] Stepper: add button-size prop (#3714)

src/stepper/README.md

@@ -81,6 +81,16 @@ export default {
 }
 ```
 
+### Custom Size
+
+```html
+<van-stepper
+  v-model="value"
+  input-width="40px"
+  button-size="32px"
+/>
+```
+
 ## API
 
 ### Props
@@ -95,7 +105,8 @@ export default {
 | disabled | Disable value change | `Boolean` | `false` |
 | disable-input | Disable input | `Boolean` | `false` |
 | async-change | Whether to enable async change | `Boolean` | `false` | - |
-| input-width | Input width | `String | Number` | `30px` |
+| input-width | Input width | `String | Number` | `32px` |
+| button-size | Button size | `String | Number` | `28px` |
 
 ### Events
 

src/stepper/README.zh-CN.md

@@ -83,6 +83,18 @@ export default {
 }
 ```
 
+### 自定义大小
+
+通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度
+
+```html
+<van-stepper
+  v-model="value"
+  input-width="40px"
+  button-size="32px"
+/>
+```
+
 ## API
 
 ### Props
@@ -97,7 +109,8 @@ export default {
 | disabled | 是否禁用步进器 | `Boolean` | `false` | - |
 | disable-input | 是否禁用输入框 | `Boolean` | `false` | - |
 | async-change | 是否开启异步变更，开启后需要手动控制输入值 | `Boolean` | `false` | - |
-| input-width | 输入框宽度，默认单位为`px` | `String | Number` | `30px` | 1.6.13 |
+| input-width | 输入框宽度，默认单位为`px` | `String | Number` | `32px` | 1.6.13 |
+| button-size | 按钮大小，默认单位为`px`，输入框高度会和按钮大小保持一致 | `String | Number` | `28px` | 2.0.5 |
 
 ### Events
 

src/stepper/demo/index.vue

@@ -58,6 +58,17 @@
         @change="onChange"
       />
     </van-cell>
+
+    <van-cell
+      center
+      :title="$t('customSize')"
+    >
+      <van-stepper
+        v-model="stepper7"
+        button-size="32px"
+        input-width="40px"
+      />
+    </van-cell>
   </demo-section>
 </template>
 
@@ -68,13 +79,15 @@ export default {
       step: '步长设置',
       range: '限制输入范围',
       integer: '限制输入整数',
-      asyncChange: '异步变更'
+      asyncChange: '异步变更',
+      customSize: '自定义大小'
     },
     'en-US': {
       step: 'Step',
       range: 'Range',
       integer: 'Integer',
       asyncChange: 'Async Change',
+      customSize: 'Custom Size'
     }
   },
 
@@ -85,7 +98,8 @@ export default {
       stepper3: 1,
       stepper4: 1,
       stepper5: 1,
-      stepper6: 1
+      stepper6: 1,
+      stepper7: 1
     };
   },
 

src/stepper/index.js

@@ -11,6 +11,7 @@ export default createComponent({
     integer: Boolean,
     disabled: Boolean,
     inputWidth: [String, Number],
+    buttonSize: [String, Number],
     asyncChange: Boolean,
     disableInput: Boolean,
     min: {
@@ -49,6 +50,32 @@ export default createComponent({
 
     plusDisabled() {
       return this.disabled || this.currentValue >= this.max;
+    },
+
+    inputStyle() {
+      const style = {};
+
+      if (this.inputWidth) {
+        style.width = suffixPx(this.inputWidth);
+      }
+
+      if (this.buttonSize) {
+        style.height = suffixPx(this.buttonSize);
+      }
+
+      return style;
+    },
+
+    buttonStyle() {
+      const style = {};
+
+      if (this.buttonSize) {
+        const size = suffixPx(this.buttonSize);
+        style.width = size;
+        style.height = size;
+      }
+
+      return style;
     }
   },
 
@@ -174,6 +201,7 @@ export default createComponent({
     return (
       <div class={bem()}>
         <button
+          style={this.buttonStyle}
           class={bem('minus', { disabled: this.minusDisabled })}
           {...createListeners('minus')}
         />
@@ -186,12 +214,13 @@ export default createComponent({
           aria-valuemin={this.min}
           aria-valuenow={this.currentValue}
           disabled={this.disabled || this.disableInput}
-          style={{ width: suffixPx(this.inputWidth) }}
+          style={this.inputStyle}
           onInput={this.onInput}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
         />
         <button
+          style={this.buttonStyle}
           class={bem('plus', { disabled: this.plusDisabled })}
           {...createListeners('plus')}
         />

src/stepper/test/__snapshots__/demo.spec.js.snap

@@ -38,5 +38,11 @@ exports[`renders demo correctly 1`] = `
       <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
     </div>
   </div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>自定义大小</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
+    </div>
+  </div>
 </div>
 `;