diff --git a/src/stepper/README.md b/src/stepper/README.md index c4c5f45b5..a4559c679 100644 --- a/src/stepper/README.md +++ b/src/stepper/README.md @@ -97,6 +97,12 @@ export default { }; ``` +### Round Theme + +```html + +``` + ## API ### Props @@ -112,6 +118,7 @@ export default { | input-width | Input width | _number \| string_ | `32px` | | button-size `v2.0.5` | Button size | _number \| string_ | `28px` | | decimal-length `v2.2.1` | Decimal length | _number \| string_ | - | +| theme `v2.8.2` | Theme, can be set to `round` | _string_ | - | | integer | Whether to allow only integers | _boolean_ | `false` | | disabled | Disable value change | _boolean_ | `false` | | disable-plus `v2.2.16` | Whether to disable plus button | _boolean_ | `false` | diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md index 156e33b95..57d5f9650 100644 --- a/src/stepper/README.zh-CN.md +++ b/src/stepper/README.zh-CN.md @@ -121,6 +121,14 @@ export default { }; ``` +### 圆角风格 + +将 theme 设置为 `round` 来展示圆角风格的步进器 + +```html + +``` + ## API ### Props @@ -136,6 +144,7 @@ export default { | input-width | 输入框宽度,默认单位为`px` | _number \| string_ | `32px` | | button-size `v2.0.5` | 按钮大小以及输入框高度,默认单位为`px` | _number \| string_ | `28px` | | decimal-length `v2.2.1` | 固定显示的小数位数 | _number \| string_ | - | +| theme `v2.8.2` | 样式风格,可选值为 `round` | _string_ | - | | integer | 是否只允许输入整数 | _boolean_ | `false` | | disabled | 是否禁用步进器 | _boolean_ | `false` | | disable-plus `v2.2.16` | 是否禁用增加按钮 | _boolean_ | `false` | diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue index e4e0758be..7119ee440 100644 --- a/src/stepper/demo/index.vue +++ b/src/stepper/demo/index.vue @@ -35,6 +35,15 @@ + + + + @@ -45,6 +54,7 @@ export default { step: '步长设置', range: '限制输入范围', integer: '限制输入整数', + roundTheme: '圆角风格', asyncChange: '异步变更', customSize: '自定义大小', disableInput: '禁用输入框', @@ -54,6 +64,7 @@ export default { step: 'Step', range: 'Range', integer: 'Integer', + roundTheme: 'Round Theme', asyncChange: 'Async Change', customSize: 'Custom Size', disableInput: 'Disable Input', @@ -71,6 +82,7 @@ export default { stepper6: 1, stepper7: 1, stepper8: 1, + stepperRound: 1, disabledInput: 1, }; }, diff --git a/src/stepper/index.js b/src/stepper/index.js index 349db7de8..7e0794a5d 100644 --- a/src/stepper/index.js +++ b/src/stepper/index.js @@ -25,6 +25,7 @@ export default createComponent({ props: { value: null, + theme: String, integer: Boolean, disabled: Boolean, inputWidth: [Number, String], @@ -278,7 +279,7 @@ export default createComponent({ }); return ( -
+
+
+
圆角风格
+
+
+
+
`; diff --git a/src/style/var.less b/src/style/var.less index 5a3ca483d..3da28bbe5 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -674,9 +674,11 @@ @stepper-button-icon-color: @text-color; @stepper-button-disabled-color: @background-color; @stepper-button-disabled-icon-color: @gray-5; +@stepper-button-round-theme-color: @red; @stepper-input-width: 32px; @stepper-input-height: 28px; @stepper-input-font-size: @font-size-md; +@stepper-input-line-height: normal; @stepper-input-text-color: @text-color; @stepper-input-disabled-text-color: @gray-5; @stepper-input-disabled-background-color: @active-color;