[new feature] Steps: add inactive-icon prop

packages/step/index.js

@@ -30,24 +30,32 @@ export default sfc({
   },
 
   render(h) {
-    const { status } = this;
-    const { activeIcon, activeColor, direction } = this.$parent;
+    const { slots, status } = this;
+    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')}>
-          {status !== 'process' ? (
-            <i class={bem('circle')} />
-          ) : (
-            this.slots('active-icon') || (
-              <Icon name={activeIcon} style={{ color: activeColor }} />
-            )
-          )}
-        </div>
+        <div class={bem('circle-container')}>{Circle()}</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;
-    }
-
-    .van-step__circle {
-      top: 16px;
-      left: -17px;
+      top: 19px;
+      left: -15px;
+      line-height: 1;
+      font-size: 12px;
+      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 {