步骤条组件新增direction和activeColor属性，增加了竖的步骤条 (#49)

packages/steps/src/step.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="van-step" :class="statusClass">
+  <div class="van-step" :class="stepClass">
     <div class="van-step__circle-container">
       <i class="van-step__circle" v-if="status !== 'process'"></i>
-      <i class="van-icon van-icon-checked" v-else></i>
+      <i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else></i>
     </div>
-    <p class="van-step__title">
+    <div class="van-step__title" :style="titleStyle">
       <slot></slot>
-    </p>
+    </div>
     <div class="van-step__line"></div>
   </div>
 </template>
@@ -30,9 +30,18 @@ export default {
         return 'process';
       }
     },
-    statusClass() {
+    stepClass() {
       const status = this.status;
-      return status ? 'van-step--' + status : '';
+      const statusClass = status ? 'van-step--' + status : '';
+      const directionClass = `van-step--${this.$parent.direction}`;
+      return [directionClass, statusClass];
+    },
+    titleStyle() {
+      if (this.status === 'process') {
+        return {
+          color: this.$parent.activeColor
+        };
+      }
     }
   }
 };

packages/steps/src/steps.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-steps" :class="`van-steps--${steps.length}`">
+  <div class="van-steps" :class="stepsClass">
     <div class="van-steps__status" v-if="title || description">
       <div class="van-steps__icon" v-if="icon || $slots.icon">
         <slot name="icon">
@@ -41,13 +41,31 @@ export default {
       default: ''
     },
     title: String,
-    description: String
+    description: String,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    activeColor: {
+      type: String,
+      default: '#06bf04'
+    }
   },
 
   data() {
     return {
       steps: []
     };
+  },
+
+  computed: {
+    stepsClass() {
+      const direction = this.direction;
+      const lengthClass = `van-steps--${this.steps.length}`;
+      const directionClass = `van-steps--${direction}`;
+
+      return direction === 'horizontal' ? [lengthClass, directionClass] : [directionClass];
+    }
   }
 };
 </script>

packages/vant-css/src/steps.css

@@ -1,13 +1,32 @@
 @import './common/var.css';
 @import './mixins/ellipsis.css';
 @import './icon.css';
+@import './mixins/border_retina.css';
 
 @component-namespace van {
   @b steps {
     overflow: hidden;
-    padding: 0 10px;
     background-color: #fff;
 
+    @m horizontal {
+      padding: 0 10px;
+
+      .van-steps__items {
+        margin: 0 0 10px;
+        overflow: hidden;
+        position: relative;
+        padding-bottom: 22px;
+
+        &.van-steps__items--alone {
+          padding-top: 10px;
+        }
+      }
+    }
+
+    @m vertical {
+      padding: 0 0 0 35px;
+    }
+
     @m 4 {
       .van-step {
         width: 33.2%;
@@ -53,86 +72,94 @@
       max-height: 18px;
       @mixin multi-ellipsis 1;
     }
-
-    @e items {
-      margin: 0 0 10px;
-      overflow: hidden;
-      position: relative;
-      padding-bottom: 20px;
-
-      @m alone {
-        padding-top: 10px;
-      }
-    }
   }
 
   @b step {
     font-size: 14px;
-    float: left;
     position: relative;
     color: $c-gray-dark;
+    
+    @m horizontal {
+      float: left;
 
-    @m finish {
-      color: $c-black;
-
-      .van-step__circle,
-      .van-step__line {
-        background-color: $c-green;
+      &:first-child {
+        .van-step__title {
+          transform: none;
+          margin-left: 0;
+        }
       }
-    }
 
-    @m process {
-      color: $c-black;
+      &:last-child {
+        position: absolute;
+        right: 10px;
+        width: auto;
+
+        .van-step__title {
+          transform: none;
+          margin-left: 0;
+        }
+
+        .van-step__circle-container {
+          left: auto;
+          right: -9px;
+        }
+
+        .van-step__line {
+          width: 0;
+        }
+      }
 
       .van-step__circle-container {
-        top: 24px;
+        position: absolute;
+        top: 28px;
+        left: -8px;
+        padding: 0 8px;
+        background-color: #fff;
+        z-index: 1;
       }
 
-      .van-icon {
+      .van-step__title {
         font-size: 12px;
-        color: $c-green;
-        line-height: 1;
-        display: block;
-      }
-    }
-
-    &:first-child {
-      .van-step__title {
-        transform: none;
-        margin-left: 0;
-      }
-    }
-
-    &:last-child {
-      position: absolute;
-      right: 10px;
-      width: auto;
-
-      .van-step__title {
-        transform: none;
-        margin-left: 0;
-      }
-
-      .van-step__circle-container {
-        left: auto;
-        right: -9px;
+        transform: translate3d(-50%, 0, 0);
+        display: inline-block;
+        margin-left: 3px;
       }
 
       .van-step__line {
-        width: 0;
+        position: absolute;
+        left: 0px;
+        top: 30px;
+        width: 100%;
+        height: 1px;
+        background-color: $c-gray-light;
+      }
+
+      &.van-step--finish {
+        color: $c-black;
+
+        .van-step__circle,
+        .van-step__line {
+          background-color: $c-green;
+        }
+      }
+
+      &.van-step--process {
+        color: $c-black;
+
+        .van-step__circle-container {
+          top: 24px;
+        }
+
+        .van-icon {
+          font-size: 12px;
+          color: $c-green;
+          line-height: 1;
+          display: block;
+        }
       }
     }
 
-    .van-step__circle-container {
-      position: absolute;
-      top: 28px;
-      left: -8px;
-      padding: 0 8px;
-      background-color: #fff;
-      z-index: 1;
-    }
-
-    @e circle {
+    .van-step__circle {
       display: block;
       width: 5px;
       height: 5px;
@@ -140,20 +167,59 @@
       border-radius: 50%;
     }
 
-    @e title {
-      font-size: 12px;
-      transform: translate3d(-50%, 0, 0);
-      display: inline-block;
-      margin-left: 3px;
-    }
+    @m vertical {
+      float: none;
+      display: block;
+      font-size: 14px;
+      line-height: 18px;
+      padding: 10px 10px 10px 0;
 
-    @e line {
-      position: absolute;
-      left: 0px;
-      top: 30px;
-      width: 100%;
-      height: 1px;
-      background-color: $c-gray-light;
+      &::after {
+        @mixin border-retina (bottom);
+      }
+
+      &:first-child {
+        &::before {
+          content: '';
+          position: absolute;
+          width: 1px;
+          height: 20px;
+          background-color: #fff;
+          top: 0;
+          left: -15px;
+          z-index: 1;
+        }
+      }
+
+      &:last-child::after {
+        display: none;
+      }
+
+      .van-step__circle-container > i {
+        position: absolute;
+        z-index: 2;
+      }
+
+      .van-icon-checked {
+        top: 12px;
+        left: -20px;
+        line-height: 1;
+        font-size: 12px;
+      }
+
+      .van-step__circle {
+        top: 16px;
+        left: -17px;
+      }
+
+      .van-step__line {
+        position: absolute;
+        top: 0;
+        left: -15px;
+        width: 1px;
+        height: 100%;
+        background-color: $c-gray-light;
+      }
     }
   }
 }