feat(Steps): add inactive-color prop

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 (
       <div class={[BORDER, bem([direction, { [status]: status }])]}>
         <div
           class={bem('title', { active })}
-          style={titleStyle}
+          style={this.titleStyle}
           onClick={this.onClickStep}
         >
           {this.$slots.default?.()}

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
 

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_ | - |
 

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,

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: `
+    <van-steps :active="0" inactive-color="red">
+      <van-step>A</van-step>
+      <van-step>B</van-step>
+    </van-steps>
+    `,
+  });
+  expect(wrapper).toMatchSnapshot();
+});