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 (
+
+
自定义大小
+
+
+
+
`;