feat(Step): add finish-icon slot (#8241)

src/step/index.tsx

@@ -73,7 +73,11 @@ export default createComponent({
         );
       }
 
-      if (getStatus() === 'finish' && finishIcon) {
+      if (getStatus() === 'finish' && (finishIcon || slots['finish-icon'])) {
+        if (slots['finish-icon']) {
+          return slots['finish-icon']();
+        }
+
         return (
           <Icon
             class={bem('icon', 'finish')}

src/steps/README.md

@@ -81,10 +81,11 @@ export default {
 
 ### Step Slots
 
-| Name          | Description          |
+| Name                 | Description          |
-| ------------- | -------------------- |
+| -------------------- | -------------------- |
-| active-icon   | Custom active icon   |
+| active-icon          | Custom active icon   |
-| inactive-icon | Custom inactive icon |
+| inactive-icon        | Custom inactive icon |
+| finish-icon `v3.0.7` | Custom finish icon   | _string_ | - |
 
 ### Steps Events
 

src/steps/README.zh-CN.md

@@ -91,10 +91,11 @@ export default {
 
 ### Step Slots
 
-| 名称          | 说明                 |
+| 名称 | 说明 |
-| ------------- | -------------------- |
+| --- | --- |
-| active-icon   | 自定义激活状态图标   |
+| active-icon | 自定义激活状态图标 |
 | inactive-icon | 自定义未激活状态图标 |
+| finish-icon `v3.0.7` | 自定义已完成步骤对应的底部图标，优先级高于 `inactive-icon` | _string_ | - |
 
 ### Steps Events
 

src/steps/test/__snapshots__/index.spec.tsx.snap

@@ -63,6 +63,19 @@ exports[`should change inactive icon when using inactive-icon prop 1`] = `
 </div>
 `;
 
+exports[`should render finish icon slot correctly 1`] = `
+<div class="van-hairline van-step van-step--horizontal van-step--finish">
+  <div class="van-step__title">
+    A
+  </div>
+  <div class="van-step__circle-container">
+    Custim Fiinsh Icon
+  </div>
+  <div class="van-step__line">
+  </div>
+</div>
+`;
+
 exports[`should render icon slot correctly 1`] = `
 <div class="van-steps van-steps--horizontal">
   <div class="van-steps__items">

src/steps/test/index.spec.tsx

@@ -90,3 +90,19 @@ test('should change finish icon when using finish-icon prop', () => {
   expect(firstStep.find('.van-icon-foo').exists()).toBeTruthy();
   expect(firstStep.html()).toMatchSnapshot();
 });
+
+test('should render finish icon slot correctly', () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Steps active={1}>
+          <Step v-slots={{ 'finish-icon': () => `Custim Fiinsh Icon` }}>A</Step>
+          <Step>B</Step>
+        </Steps>
+      );
+    },
+  });
+
+  const firstStep = wrapper.find('.van-step');
+  expect(firstStep.html()).toMatchSnapshot();
+});