feat(steps): add new steps properties inactiveIcon & activeIcon (#3315)

fix #3111

example/pages/steps/index.js

@@ -1,32 +1,40 @@
 import Page from '../../common/page';
 import Toast from '../../dist/toast/toast';
+import icons from '../../dist/@vant/icons/src/config';
+
+const steps = [
+  {
+    text: '步骤一',
+    desc: '描述信息',
+  },
+  {
+    text: '步骤二',
+    desc: '描述信息',
+  },
+  {
+    text: '步骤三',
+    desc: '描述信息',
+  },
+  {
+    text: '步骤四',
+    desc: '描述信息',
+  },
+];
 
 Page({
   data: {
     active: 1,
-    steps: [
-      {
-        text: '步骤一',
-        desc: '描述信息'
-      },
-      {
-        text: '步骤二',
-        desc: '描述信息'
-      },
-      {
-        text: '步骤三',
-        desc: '描述信息'
-      },
-      {
-        text: '步骤四',
-        desc: '描述信息'
-      }
-    ]
+    steps,
+    customIconSteps: steps.map((item, index) => ({
+      ...item,
+      inactiveIcon: icons.outline[index],
+      activeIcon: icons.basic[index],
+    })),
   },
 
   nextStep() {
     this.setData({
-      active: ++this.data.active % 4
+      active: ++this.data.active % 4,
     });
   },
 

example/pages/steps/index.wxml

@@ -2,6 +2,7 @@
   <van-steps
     steps="{{ steps }}"
     active="{{ active }}"
+    bind:click-step="onClick"
     custom-class="demo-margin-bottom"
   />
 
@@ -18,6 +19,13 @@
   />
 </demo-block>
 
+<demo-block title="自定义图标">
+  <van-steps
+    steps="{{ customIconSteps }}"
+    active="{{ active }}"
+  />
+</demo-block>
+
 <demo-block title="竖向步骤条">
   <van-steps
     steps="{{ steps }}"
@@ -27,15 +35,4 @@
   />
 </demo-block>
 
-<demo-block title="click事件">
-  <van-steps
-    steps="{{ steps }}"
-    bind:click-step="onClick"
-    active="{{ active }}"
-    custom-class="demo-margin-bottom"
-  />
-
-  <van-button custom-class="demo-margin-left" bind:click="nextStep">下一步</van-button>
-</demo-block>
-
 <van-toast id="van-toast" />

packages/steps/README.md

@@ -56,6 +56,47 @@ Page({
 />
 ```
 
+### 自定义图标
+
+可以通过 `inactiveIcon` 和 `activeIcon` 属性分别设置每一项的图标
+
+```html
+<van-steps steps="{{ steps }}" active="{{ active }}" />
+```
+
+```javascript
+Page({
+  data: {
+    steps: [
+      {
+        text: '步骤一',
+        desc: '描述信息',
+        inactiveIcon: 'location-o',
+        activeIcon: 'success',
+      },
+      {
+        text: '步骤二',
+        desc: '描述信息',
+        inactiveIcon: 'like-o',
+        activeIcon: 'plus',
+      },
+      {
+        text: '步骤三',
+        desc: '描述信息',
+        inactiveIcon: 'star-o',
+        activeIcon: 'cross',
+      },
+      {
+        text: '步骤四',
+        desc: '描述信息',
+        inactiveIcon: 'phone-o',
+        activeIcon: 'fail',
+      },
+    ],
+  },
+});
+```
+
 ### 竖向步骤条
 
 可以通过设置`direction`属性来改变步骤条的显示方式

packages/steps/index.wxml

@@ -17,9 +17,9 @@
       <view class="van-step__circle-container">
         <block wx:if="{{ index !== active }}">
           <van-icon
-            wx:if="{{ inactiveIcon }}"
+            wx:if="{{ item.inactiveIcon || inactiveIcon }}"
             color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}"
-            name="{{ inactiveIcon }}"
+            name="{{ item.inactiveIcon || inactiveIcon }}"
             custom-class="van-step__icon"
           />
           <view
@@ -29,7 +29,7 @@
           />
         </block>
 
-        <van-icon wx:else name="{{ activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
+        <van-icon wx:else name="{{ item.activeIcon || activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
       </view>
       <view
         wx:if="{{ index !== steps.length - 1 }}"