[new feature] Steps: add inactive-icon prop

docs/markdown/v2-progress-tracking.md

@@ -72,6 +72,10 @@
 - 新增`left-icon`插槽
 - 新增`right-icon`插槽
 
+### Steps
+
+- 新增`inactive-icon`属性
+
 ### SwitchCell
 
 - 新增`border`属性

packages/step/index.js

@@ -30,24 +30,32 @@ export default sfc({
   },
 
   render(h) {
-    const { status } = this;
+    const { slots, status } = this;
-    const { activeIcon, activeColor, direction } = this.$parent;
+    const { activeIcon, activeColor, inactiveIcon, direction } = this.$parent;
     const titleStyle = status === 'process' && { color: activeColor };
 
+    function Circle() {
+      if (status === 'process') {
+        return (
+          slots('active-icon') || (
+            <Icon class={bem('icon')} name={activeIcon} color={activeColor} />
+          )
+        );
+      }
+
+      if (inactiveIcon) {
+        return <Icon class={bem('icon')} name={inactiveIcon} />;
+      }
+
+      return <i class={bem('circle')} />;
+    }
+
     return (
       <div class={['van-hairline', bem([direction, { [status]: status }])]}>
         <div class={bem('title')} style={titleStyle}>
           {this.slots()}
         </div>
-        <div class={bem('circle-container')}>
+        <div class={bem('circle-container')}>{Circle()}</div>
-          {status !== 'process' ? (
-            <i class={bem('circle')} />
-          ) : (
-            this.slots('active-icon') || (
-              <Icon name={activeIcon} style={{ color: activeColor }} />
-            )
-          )}
-        </div>
         <div class={bem('line')} />
       </div>
     );

packages/step/index.less

@@ -42,18 +42,19 @@
 
     .van-step__circle-container {
       position: absolute;
-      top: 28px;
+      top: 30px;
       left: -8px;
       padding: 0 8px;
-      background-color: @white;
       z-index: 1;
+      background-color: @white;
+      transform: translateY(-50%);
     }
 
     .van-step__title {
-      font-size: 12px;
-      transform: translate3d(-50%, 0, 0);
       display: inline-block;
+      font-size: 12px;
       margin-left: 3px;
+      transform: translateX(-50%);
     }
 
     .van-step__line {
@@ -65,18 +66,13 @@
       background-color: @border-color;
     }
 
-    &.van-step--process {
+    .van-step__icon {
+      display: block;
+      font-size: 12px;
+    }
+
+    .van-step--process {
       color: @text-color;
-
-      .van-step__circle-container {
-        top: 24px;
-      }
-
-      .van-icon {
-        font-size: 12px;
-        color: @green;
-        display: block;
-      }
     }
   }
 
@@ -104,14 +100,14 @@
       }
     }
 
-    .van-step__circle-container > i {
+    .van-step__circle-container {
       position: absolute;
       z-index: 2;
-    }
+      top: 19px;
-
+      left: -15px;
-    .van-step__circle {
+      line-height: 1;
-      top: 16px;
+      font-size: 12px;
-      left: -17px;
+      transform: translate(-50%, -50%);
     }
 
     .van-step__line {
@@ -122,15 +118,6 @@
       height: 100%;
       background-color: @border-color;
     }
-
-    &.van-step--process {
-      .van-icon {
-        top: 12px;
-        left: -20px;
-        line-height: 1;
-        font-size: 12px;
-      }
-    }
   }
 
   &:last-child {

packages/steps/demo/index.vue

@@ -15,6 +15,7 @@
       <van-steps
         :active="active"
         active-icon="success"
+        inactive-icon="arrow"
         active-color="#38f"
       >
         <van-step>{{ $t('step1') }}</van-step>

packages/steps/en-US.md

@@ -71,8 +71,9 @@ export default {
 | active | Active step | `Number` | 0 |
 | description | Description | `String` | - |
 | direction | Can be set to `vertical` | `String` | `horizontal` |
-| active-icon | Active icon name | `String` | `checked` |
 | active-color | Active step color | `String` | `#07c160` |
+| active-icon | Active icon name | `String` | `checked` |
+| inactive-icon | Active icon name | `String` | - |
 
 ### Step Slot
 

packages/steps/index.js

@@ -6,6 +6,7 @@ const [sfc, bem] = use('steps');
 export default sfc({
   props: {
     active: Number,
+    inactiveIcon: String,
     direction: {
       type: String,
       default: 'horizontal'

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

@@ -12,7 +12,7 @@ exports[`renders demo correctly 1`] = `
         </div>
         <div class="van-hairline van-step van-step--horizontal van-step--process">
           <div class="van-step__title" style="color:#07c160;">商家接单</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-checked" style="color:#07c160;">
+          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon" style="color:#07c160;">
               <!----></i></div>
           <div class="van-step__line"></div>
         </div>
@@ -34,23 +34,26 @@ exports[`renders demo correctly 1`] = `
       <div class="van-steps__items">
         <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__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
+              <!----></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;">
+          <div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon" 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__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
+              <!----></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__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
+              <!----></i></div>
           <div class="van-step__line"></div>
         </div>
       </div>
@@ -64,7 +67,7 @@ exports[`renders demo correctly 1`] = `
             <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:#07c160;">
+          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon" style="color:#07c160;">
               <!----></i></div>
           <div class="van-step__line"></div>
         </div>

packages/steps/zh-CN.md

@@ -74,8 +74,9 @@ export default {
 |------|------|------|------|------|
 | active | 当前步骤 | `Number` | 0 | - |
 | direction | 显示方向，可选值为 `vertical` | `String` | `horizontal` | - |
-| active-icon | 激活状态底部图标，可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
 | active-color | 激活状态颜色 | `String` | `#07c160` | - |
+| active-icon | 激活状态底部图标，可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
+| inactive-icon | 未激活状态底部图标，可选值见 Icon 组件 | `String` | - | 2.0.0 |
 
 ### Step Slot