feat(Steps): add finish-icon prop (#8237)

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 (
+          <Icon
+            class={bem('icon', 'finish')}
+            name={finishIcon}
+            color={activeColor}
+          />
+        );
+      }
+
       const inactiveIconSlot = this.slots('inactive-icon');
 
       if (inactiveIcon || inactiveIconSlot) {

src/step/index.less

@@ -144,7 +144,8 @@
   &__title {
     transition: color @animation-duration-base;
 
-    &--active {
+    &--active,
+    &--finish {
       color: @step-active-color;
     }
   }

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
 

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
 

src/steps/index.js

@@ -7,6 +7,7 @@ export default createComponent({
   mixins: [ParentMixin('vanSteps')],
 
   props: {
+    finishIcon: String,
     activeColor: String,
     inactiveIcon: String,
     inactiveColor: String,