step component

packages/steps/src/step.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="zan-step">
-    
+  <div class="zan-step" :class="`zan-step--${status}`">
+    <div class="zan-step__circle-container">
+      <i class="zan-step__circle" v-if="status !== 'process'"></i>
+      <i class="zan-icon zan-icon-checked" v-else></i>
+    </div>
+    <p class="zan-step__title">
+      <slot></slot>
+    </p>
+    <div class="zan-step__line"></div>
   </div>
 </template>
 
@@ -8,8 +15,23 @@
 export default {
   name: 'zan-step',
 
-  props: {
-    title: String
+  beforeCreate() {
+    this.$parent.steps.push(this);
+  },
+
+  computed: {
+    status() {
+      let index = this.$parent.steps.indexOf(this);
+      let active = this.$parent.active;
+
+      if (index === -1) {
+        return '';
+      } else if (index < active) {
+        return 'finish';
+      } else if (index === active) {
+        return 'process';
+      }
+    }
   }
 };
 </script>

packages/steps/src/steps.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="zan-steps">
+  <div class="zan-steps" :class="`zan-steps--${steps.length}`">
     <div class="zan-steps__status" v-if="icon">
-      <i class="zan-icon" :class="computedIconClass"></i>
+      <i class="zan-icon zan-steps__icon" :class="computedIconClass"></i>
       <div class="zan-steps__message">
         <div class="zan-steps__message-wrapper">
           <h4 class="zan-steps__title" v-text="title"></h4>
           <p class="zan-steps__desc" v-text="description"></p>
         </div>
       </div>
+      <slot name="message-extra">
+      </slot>
     </div>
     <div class="zan-steps__items">
       <slot></slot>
@@ -38,6 +40,12 @@ export default {
 
       return result;
     }
+  },
+
+  data() {
+    return {
+      steps: []
+    };
   }
 };
 </script>