diff --git a/src/step/index.js b/src/step/index.js index 80a6d757a..d963e0aec 100644 --- a/src/step/index.js +++ b/src/step/index.js @@ -41,7 +41,7 @@ export default createComponent({ methods: { genCircle() { - const { activeIcon, activeColor, inactiveIcon } = this.parent; + const { activeIcon, activeColor, finishIcon, inactiveIcon } = this.parent; if (this.active) { return ( @@ -55,6 +55,16 @@ export default createComponent({ ); } + if (this.status === 'finish' && finishIcon) { + return ( + + ); + } + const inactiveIconSlot = this.slots('inactive-icon'); if (inactiveIcon || inactiveIconSlot) { diff --git a/src/step/index.less b/src/step/index.less index ed99f540c..cf30066ac 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 6a2f17a75..95342e544 100644 --- a/src/steps/README.md +++ b/src/steps/README.md @@ -75,6 +75,7 @@ export default { | inactive-color `v2.9.1` | Inactive step color | _string_ | `#969799` | | active-icon | Active icon name | _string_ | `checked` | | inactive-icon | Inactive icon name | _string_ | - | +| finish-icon `v2.12.7` | Finish icon name | _string_ | - | ### Step Slots diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md index bb93cd1e7..0453ba4ab 100644 --- a/src/steps/README.zh-CN.md +++ b/src/steps/README.zh-CN.md @@ -85,6 +85,7 @@ export default { | inactive-color `v2.9.1` | 未激活状态颜色 | _string_ | `#969799` | | active-icon | 激活状态底部图标,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` | | inactive-icon | 未激活状态底部图标,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - | +| finish-icon `v2.12.7` | 已完成步骤对应的底部图标,优先级高于 `inactive-icon`,可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - | ### Step Slots diff --git a/src/steps/index.js b/src/steps/index.js index 730fa96eb..95868b054 100644 --- a/src/steps/index.js +++ b/src/steps/index.js @@ -7,6 +7,7 @@ export default createComponent({ mixins: [ParentMixin('vanSteps')], props: { + finishIcon: String, activeColor: String, inactiveIcon: String, inactiveColor: String,