diff --git a/src/stepper/README.md b/src/stepper/README.md
index 08947ba89..532b336ff 100644
--- a/src/stepper/README.md
+++ b/src/stepper/README.md
@@ -81,6 +81,16 @@ export default {
}
```
+### Custom Size
+
+```html
+
+```
+
## 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
diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md
index 19a1ee21d..ad79c8494 100644
--- a/src/stepper/README.zh-CN.md
+++ b/src/stepper/README.zh-CN.md
@@ -83,6 +83,18 @@ export default {
}
```
+### 自定义大小
+
+通过`input-width`属性设置输入框宽度,通过`button-size`属性设置按钮大小和输入框高度
+
+```html
+
+```
+
## 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
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index 0d59084ed..708260b16 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -58,6 +58,17 @@
@change="onChange"
/>
+
+
+
+
@@ -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
};
},
diff --git a/src/stepper/index.js b/src/stepper/index.js
index 2aafe0ad8..5c8cd9345 100644
--- a/src/stepper/index.js
+++ b/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 (
@@ -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}
/>
diff --git a/src/stepper/test/__snapshots__/demo.spec.js.snap b/src/stepper/test/__snapshots__/demo.spec.js.snap
index 8d9754105..d37bc1995 100644
--- a/src/stepper/test/__snapshots__/demo.spec.js.snap
+++ b/src/stepper/test/__snapshots__/demo.spec.js.snap
@@ -38,5 +38,11 @@ exports[`renders demo correctly 1`] = `
+
`;