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;