[new feature] Steps: add active-icon prop (#2934)

packages/step/index.js

@@ -24,7 +24,7 @@ export default sfc({
 
   render(h) {
     const { status } = this;
-    const { activeColor, direction } = this.$parent;
+    const { activeIcon, activeColor, direction } = this.$parent;
     const titleStyle = status === 'process' && { color: activeColor };
 
     return (
@@ -36,7 +36,7 @@ export default sfc({
           {status !== 'process' ? (
             <i class={bem('circle')} />
           ) : (
-            <Icon name="checked" style={{ color: activeColor }} />
+            <Icon name={activeIcon} style={{ color: activeColor }} />
           )}
         </div>
         <div class={bem('line')} />

packages/steps/demo/index.vue

@@ -11,11 +11,23 @@
       <van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
     </demo-block>
 
+    <demo-block :title="$t('customStyle')">
+      <van-steps
+        :active="active"
+        active-icon="success"
+        active-color="#38f"
+      >
+        <van-step>{{ $t('step1') }}</van-step>
+        <van-step>{{ $t('step2') }}</van-step>
+        <van-step>{{ $t('step3') }}</van-step>
+        <van-step>{{ $t('step4') }}</van-step>
+      </van-steps>
+    </demo-block>
+
     <demo-block :title="$t('title3')">
       <van-steps
         :active="0"
         direction="vertical"
-        active-color="#f44"
       >
         <van-step>
           <h3>{{ $t('status1') }}</h3>
@@ -47,7 +59,8 @@ export default {
       title3: '竖向步骤条',
       status1: '【城市】物流状态1',
       status2: '【城市】物流状态',
-      status3: '快件已发货'
+      status3: '快件已发货',
+      customStyle: '自定义样式'
     },
     'en-US': {
       nextStep: 'Next Step',
@@ -59,7 +72,8 @@ export default {
       title3: 'Vertical Steps',
       status1: '【City】Status1',
       status2: '【City】Status2',
-      status3: '【City】Status3'
+      status3: '【City】Status3',
+      customStyle: 'Custom Style'
     }
   },
 

packages/steps/en-US.md

@@ -30,10 +30,25 @@ export default {
 }
 ```
 
+#### Custom Style
+
+```html
+<van-steps
+  :active="active"
+  active-icon="success"
+  active-color="#38f"
+>
+  <van-step>Step1</van-step>
+  <van-step>Step2</van-step>
+  <van-step>Step3</van-step>
+  <van-step>Step4</van-step>
+</van-steps>
+```
+
 #### Vertical Steps
 
 ```html
-<van-steps direction="vertical" :active="0" active-color="#f44">
+<van-steps direction="vertical" :active="0">
   <van-step>
     <h3>【City】Status1</h3>
     <p>2016-07-12 12:40</p>
@@ -58,7 +73,8 @@ export default {
 | icon-class | Icon class | `String` | - |
 | title | Title | `String` | - |
 | description | Description | `String` | - |
-| direction | Can be set to `horizontal` `vertical` | `String` | `horizontal` |
+| direction | Can be set to `vertical` | `String` | `horizontal` |
+| active-icon | Active icon name | `String` | `checked` |
 | active-color | Active step color | `String` | `#07c160` |
 
 ### Steps Slot

packages/steps/index.js

@@ -18,6 +18,10 @@ export default sfc({
     activeColor: {
       type: String,
       default: GREEN
+    },
+    activeIcon: {
+      type: String,
+      default: 'checked'
     }
   },
 

packages/steps/test/__snapshots__/demo.spec.js.snap

@@ -29,15 +29,42 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">下一步</span></button>
   </div>
+  <div>
+    <div class="van-steps van-steps--horizontal">
+      <div class="van-steps__items van-steps__items--alone">
+        <div class="van-hairline van-step van-step--horizontal van-step--finish">
+          <div class="van-step__title">买家下单</div>
+          <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
+          <div class="van-step__line"></div>
+        </div>
+        <div class="van-hairline van-step van-step--horizontal van-step--process">
+          <div class="van-step__title" style="color:#38f;">商家接单</div>
+          <div class="van-step__circle-container"><i class="van-icon van-icon-success" style="color:#38f;">
+              <!----></i></div>
+          <div class="van-step__line"></div>
+        </div>
+        <div class="van-hairline van-step van-step--horizontal">
+          <div class="van-step__title">买家提货</div>
+          <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
+          <div class="van-step__line"></div>
+        </div>
+        <div class="van-hairline van-step van-step--horizontal">
+          <div class="van-step__title">交易完成</div>
+          <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
+          <div class="van-step__line"></div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-steps van-steps--vertical">
       <div class="van-steps__items van-steps__items--alone">
         <div class="van-hairline van-step van-step--vertical van-step--process">
-          <div class="van-step__title" style="color:#f44;">
+          <div class="van-step__title" style="color:#07c160;">
             <h3>【城市】物流状态1</h3>
             <p>2016-07-12 12:40</p>
           </div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-checked" style="color:#f44;">
+          <div class="van-step__circle-container"><i class="van-icon van-icon-checked" style="color:#07c160;">
               <!----></i></div>
           <div class="van-step__line"></div>
         </div>

packages/steps/zh-CN.md

@@ -30,11 +30,29 @@ export default {
 }
 ```
 
-#### 竖向步骤条
+#### 自定义样式
-可以通过设置`direction`属性来改变步骤条的显示方式
+
+可以通过`active-icon`和`active-color`属性设置激活状态下的图标和颜色
 
 ```html
-<van-steps direction="vertical" :active="0" active-color="#f44">
+<van-steps
+  :active="active"
+  active-icon="success"
+  active-color="#38f"
+>
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>
+</van-steps>
+```
+
+#### 竖向步骤条
+
+可以通过设置`direction`属性来改变步骤条的显示方向
+
+```html
+<van-steps direction="vertical" :active="0">
   <van-step>
     <h3>【城市】物流状态1</h3>
     <p>2016-07-12 12:40</p>
@@ -55,11 +73,12 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | active | 当前步骤 | `Number` | 0 | - |
-| title | 描述栏标题 | `String` | - | - |
+| title | 顶部描述栏标题 | `String` | - | - |
-| description | 描述栏文字 | `String` | - | - |
+| description | 顶部描述栏文字 | `String` | - | - |
-| icon | 描述栏图标 | `String` | - | - |
+| icon | 顶部描述栏图标 | `String` | - | - |
-| icon-class | 图标额外类名 | `String` | - | - |
+| icon-class | 顶部描述栏图标额外类名 | `String` | - | - |
 | direction | 显示方向，可选值为 `vertical` | `String` | `horizontal` | - |
+| active-icon | 激活状态底部图标，可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
 | active-color | 激活状态颜色 | `String` | `#07c160` | - |
 
 ### Steps Slot