diff --git a/src/step/index.js b/src/step/index.js index aa57529bf..b7224567f 100644 --- a/src/step/index.js +++ b/src/step/index.js @@ -45,7 +45,7 @@ export default createComponent({ }; const renderCircle = () => { - const { activeIcon, activeColor, inactiveIcon } = parentProps; + const { finishIcon, activeIcon, activeColor, inactiveIcon } = parentProps; if (isActive()) { if (slots['active-icon']) { @@ -61,6 +61,16 @@ export default createComponent({ ); } + if (getStatus() === 'finish' && finishIcon) { + return ( + + ); + } + if (slots['inactive-icon']) { return slots['inactive-icon'](); } diff --git a/src/step/index.less b/src/step/index.less index c9bb2b5e3..43e01fb2e 100644 --- a/src/step/index.less +++ b/src/step/index.less @@ -144,7 +144,8 @@ &__title { transition: color @animation-duration-base; - &--active { + &--active, + &--finish { color: @step-active-color; } } diff --git a/src/steps/README.md b/src/steps/README.md index 85c425dd6..a223c55b4 100644 --- a/src/steps/README.md +++ b/src/steps/README.md @@ -77,6 +77,7 @@ export default { | inactive-color | Inactive step color | _string_ | `#969799` | | active-icon | Active icon name | _string_ | `checked` | | inactive-icon | Inactive icon name | _string_ | - | +| finish-icon `v3.0.7` | Finish icon name | _string_ | - | ### Step Slots diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md index c6ccfab49..c46a295ee 100644 --- a/src/steps/README.zh-CN.md +++ b/src/steps/README.zh-CN.md @@ -81,12 +81,13 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| active | 当前步骤 | _number \| string_ | `0` | -| direction | 显示方向，可选值为 `vertical` | _string_ | `horizontal` | -| active-color | 激活状态颜色 | _string_ | `#07c160` | -| inactive-color | 未激活状态颜色 | _string_ | `#969799` | -| active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` | -| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - | +| active | 当前步骤对应的索引值 | _number \| string_ | `0` | +| direction | 步骤条方向，可选值为 `vertical` | _string_ | `horizontal` | +| active-icon | 当前步骤对应的底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` | +| inactive-icon | 非当前步骤对应的底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - | +| finish-icon `v3.0.7` | 已完成步骤对应的底部图标，优先级高于 `inactive-icon`，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - | +| active-color | 当前步骤和已完成步骤的颜色 | _string_ | `#07c160` | +| inactive-color | 未激活步骤的颜色 | _string_ | `#969799` | ### Step Slots diff --git a/src/steps/index.js b/src/steps/index.js index a22f91646..297147b33 100644 --- a/src/steps/index.js +++ b/src/steps/index.js @@ -7,6 +7,7 @@ export const STEPS_KEY = 'vanSteps'; export default createComponent({ props: { + finishIcon: String, activeColor: String, inactiveIcon: String, inactiveColor: String, diff --git a/src/steps/test/__snapshots__/index.spec.js.snap b/src/steps/test/__snapshots__/index.spec.js.snap index 21dff74b3..e14d37b17 100644 --- a/src/steps/test/__snapshots__/index.spec.js.snap +++ b/src/steps/test/__snapshots__/index.spec.js.snap @@ -1,5 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`should change finish icon when using finish-icon prop 1`] = ` +
+
+ A +
+
+ + +
+
+
+
+`; + exports[`should change inactive color when using inactive-color prop 1`] = `
@@ -38,30 +52,15 @@ exports[`should change inactive color when using inactive-color prop 1`] = ` `; exports[`should change inactive icon when using inactive-icon prop 1`] = ` -
-
-
-
- A -
-
- - -
-
-
-
-
-
- B -
-
- - -
-
-
-
+
+
+ B +
+
+ + +
+
`; diff --git a/src/steps/test/index.spec.js b/src/steps/test/index.spec.js index d436b6ed8..408d29dcc 100644 --- a/src/steps/test/index.spec.js +++ b/src/steps/test/index.spec.js @@ -68,5 +68,25 @@ test('should change inactive icon when using inactive-icon prop', () => { ); }, }); - expect(wrapper.html()).toMatchSnapshot(); + + const steps = wrapper.findAll('.van-step'); + expect(steps[1].find('.van-icon-foo').exists()).toBeTruthy(); + expect(steps[1].html()).toMatchSnapshot(); +}); + +test('should change finish icon when using finish-icon prop', () => { + const wrapper = mount({ + render() { + return ( + + A + B + + ); + }, + }); + + const firstStep = wrapper.find('.van-step'); + expect(firstStep.find('.van-icon-foo').exists()).toBeTruthy(); + expect(firstStep.html()).toMatchSnapshot(); });