diff --git a/src-next/step/index.js b/src-next/step/index.js
index 5998e2d51..0e3390561 100644
--- a/src-next/step/index.js
+++ b/src-next/step/index.js
@@ -23,10 +23,18 @@ export default createComponent({
},
lineStyle() {
- if (this.status === 'finish' && this.parent.activeColor) {
- return {
- background: this.parent.activeColor,
- };
+ if (this.status === 'finish') {
+ return { background: this.parent.activeColor };
+ }
+ return { background: this.parent.inactiveColor };
+ },
+
+ titleStyle() {
+ if (this.active) {
+ return { color: this.parent.activeColor };
+ }
+ if (!this.status) {
+ return { color: this.parent.inactiveColor };
}
},
},
@@ -65,15 +73,13 @@ export default createComponent({
render() {
const { status, active } = this;
- const { activeColor, direction } = this.parent;
-
- const titleStyle = active && { color: activeColor };
+ const { direction } = this.parent;
return (
{this.$slots.default?.()}
diff --git a/src-next/steps/README.md b/src-next/steps/README.md
index 0f2863655..a82b38f2f 100644
--- a/src-next/steps/README.md
+++ b/src-next/steps/README.md
@@ -67,13 +67,14 @@ export default {
### Steps Props
-| Attribute | Description | Type | Default |
-| ------------- | ------------------------ | ------------------ | ------------ |
-| active | Active step | _number \| string_ | `0` |
-| direction | Can be set to `vertical` | _string_ | `horizontal` |
-| active-color | Active step color | _string_ | `#07c160` |
-| active-icon | Active icon name | _string_ | `checked` |
-| inactive-icon | Active icon name | _string_ | - |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| active | Active step | _number \| string_ | `0` |
+| direction | Can be set to `vertical` | _string_ | `horizontal` |
+| active-color | Active step color | _string_ | `#07c160` |
+| inactive-color `v2.9.1` | Inactive step color | _string_ | `#969799` |
+| active-icon | Active icon name | _string_ | `checked` |
+| inactive-icon | Inactive icon name | _string_ | - |
### Step Slots
diff --git a/src-next/steps/README.zh-CN.md b/src-next/steps/README.zh-CN.md
index d1a93a0f1..d4610bc29 100644
--- a/src-next/steps/README.zh-CN.md
+++ b/src-next/steps/README.zh-CN.md
@@ -78,6 +78,7 @@ export default {
| active | 当前步骤 | _number \| string_ | `0` |
| direction | 显示方向,可选值为 `vertical` | _string_ | `horizontal` |
| active-color | 激活状态颜色 | _string_ | `#07c160` |
+| inactive-color `v2.9.1` | 未激活状态颜色 | _string_ | `#969799` |
| active-icon | 激活状态底部图标,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` |
| inactive-icon | 未激活状态底部图标,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
diff --git a/src-next/steps/index.js b/src-next/steps/index.js
index 45b0ad84b..3e17de6ce 100644
--- a/src-next/steps/index.js
+++ b/src-next/steps/index.js
@@ -9,6 +9,7 @@ export default createComponent({
props: {
activeColor: String,
inactiveIcon: String,
+ inactiveColor: String,
active: {
type: [Number, String],
default: 0,
diff --git a/src-next/steps/test/index.spec.js b/src-next/steps/test/index.spec.js
index 2521175f1..29d694e04 100644
--- a/src-next/steps/test/index.spec.js
+++ b/src-next/steps/test/index.spec.js
@@ -47,3 +47,15 @@ test('click-step event', () => {
expect(onClickStep).toHaveBeenCalledTimes(2);
expect(onClickStep).toHaveBeenLastCalledWith(2);
});
+
+test('inactive-color prop', () => {
+ const wrapper = mount({
+ template: `
+
+ A
+ B
+
+ `,
+ });
+ expect(wrapper).toMatchSnapshot();
+});