feat(Steps): add active-icon prop (#1965)

example/pages/steps/index.js

@@ -2,7 +2,7 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    active: 0,
+    active: 1,
     steps: [
       {
         text: '步骤一',

example/pages/steps/index.wxml

@@ -8,6 +8,15 @@
   <van-button custom-class="demo-margin-left" bind:click="nextStep">下一步</van-button>
 </demo-block>
 
+<demo-block title="自定义样式">
+  <van-steps
+    steps="{{ steps }}"
+    active="{{ active }}"
+    active-icon="success"
+    active-color="#38f"
+  />
+</demo-block>
+
 <demo-block title="竖向步骤条">
   <van-steps
     steps="{{ steps }}"

packages/steps/README.md

@@ -46,6 +46,18 @@ Page({
 });
 ```
 
+### 自定义样式
+可以通过 `active-icon` 和 `active-color` 属性设置激活状态下的图标和颜色
+
+```html
+<van-steps
+  steps="{{ steps }}"
+  active="{{ active }}"
+  active-icon="success"
+  active-color="#38f"
+/>
+```
+
 ### 竖向步骤条
 可以通过设置`direction`属性来改变步骤条的显示方式
 
@@ -65,6 +77,7 @@ Page({
 | active | 当前步骤 | *number* | 0 |
 | direction | 显示方向，可选值为 `horizontal` `vertical` | *string* | `horizontal` |
 | active-color | 激活状态颜色 | *string* | `#07c160` |
+| active-icon | 激活状态底部图标，可选值见 Icon 组件 | *string* | `checked` |
 
 ### 外部样式类
 

packages/steps/index.ts

@@ -13,6 +13,10 @@ VantComponent({
     activeColor: {
       type: String,
       value: GREEN
+    },
+    activeIcon: {
+      type: String,
+      value: 'checked'
     }
   }
 });

packages/steps/index.wxml

@@ -13,7 +13,7 @@
       </view>
       <view class="van-step__circle-container">
         <view class="van-step__circle" wx:if="{{ index !== active }}" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" />
-        <van-icon wx:else name="checked" color="{{ activeColor }}" custom-class="van-step__active" />
+        <van-icon wx:else name="{{ activeIcon }}" color="{{ activeColor }}" custom-class="van-step__active" />
       </view>
       <view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" />
     </view>