步骤条组件新增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>