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(); +});