From 1d242b7fd3321e84e458674f50ac620c9359461d Mon Sep 17 00:00:00 2001
From: Jake <Jake.Laoyu@gmail.com>
Date: Thu, 5 Sep 2019 16:53:28 +0800
Subject: [PATCH] feat(Steps): add active-icon prop (#1965)

---
 example/pages/steps/index.js   |  2 +-
 example/pages/steps/index.wxml |  9 +++++++++
 packages/steps/README.md       | 13 +++++++++++++
 packages/steps/index.ts        |  4 ++++
 packages/steps/index.wxml      |  2 +-
 5 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/example/pages/steps/index.js b/example/pages/steps/index.js
index 3ac017f8..024d3a31 100644
--- a/example/pages/steps/index.js
+++ b/example/pages/steps/index.js
@@ -2,7 +2,7 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    active: 0,
+    active: 1,
     steps: [
       {
         text: '步骤一',
diff --git a/example/pages/steps/index.wxml b/example/pages/steps/index.wxml
index 3b03fbb0..cae95837 100644
--- a/example/pages/steps/index.wxml
+++ b/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 }}"
diff --git a/packages/steps/README.md b/packages/steps/README.md
index 5d6d71b4..d10ff3b4 100644
--- a/packages/steps/README.md
+++ b/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` |
 
 ### 外部样式类
 
diff --git a/packages/steps/index.ts b/packages/steps/index.ts
index 3152bc8c..97205679 100644
--- a/packages/steps/index.ts
+++ b/packages/steps/index.ts
@@ -13,6 +13,10 @@ VantComponent({
     activeColor: {
       type: String,
       value: GREEN
+    },
+    activeIcon: {
+      type: String,
+      value: 'checked'
     }
   }
 });
diff --git a/packages/steps/index.wxml b/packages/steps/index.wxml
index 508705d6..d0d0d01f 100644
--- a/packages/steps/index.wxml
+++ b/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>