step component

docs/examples-docs/steps.md

@@ -2,3 +2,56 @@
 
 ### 基础用法
 
+```html
+<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+  <zan-step>买家下单</zan-step>
+  <zan-step>商家接单</zan-step>
+  <zan-step>买家提货</zan-step>
+  <zan-step>交易完成</zan-step>
+</zan-steps>
+
+<script>
+export default {
+  data() {
+    return {
+      active: 0
+    };
+  },
+
+  methods: {
+    nextStep() {
+      if (++this.active > 3) this.active = 0;
+    }
+  }
+}
+</script>
+```
+
+### 只显示步骤条
+
+```html
+<zan-steps :active="active">
+  <zan-step>买家下单</zan-step>
+  <zan-step>商家接单</zan-step>
+  <zan-step>买家提货</zan-step>
+  <zan-step>交易完成</zan-step>
+</zan-steps>
+```
+
+
+### Steps API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| active | 当前激活的步骤，从0开始 | Number  | ''          | ''          |
+| icon | 当前步骤的icon | string  | ''          | ''          |
+| iconClass | 当前步骤栏为icon添加的类 | string  | ''          | ''          |
+| title | 当前步骤从标题 | string  | ''          | ''          |
+| description | 当前步骤描述 | string  | ''          | ''          |
+
+### Steps Slot
+
+| 名称       | 说明      |
+|-----------|-----------|
+| message-extra | 状态栏添加额外的元素 |
+

docs/examples/steps.vue

@@ -3,17 +3,52 @@
     <h1 class="page-title">Steps</h1>
 
     <h2 class="page-sub-title">基础用法</h2>
-    <zan-steps icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货">
+    <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+      <zan-step>买家下单</zan-step>
+      <zan-step>商家接单</zan-step>
+      <zan-step>买家提货</zan-step>
+      <zan-step>交易完成</zan-step>
+    </zan-steps>
+    <zan-button @click="nextStep">下一步</zan-button>
+
+    <h2 class="page-sub-title">只显示步骤条</h2>
+    <zan-steps :active="active">
+      <zan-step>买家下单</zan-step>
+      <zan-step>商家接单</zan-step>
+      <zan-step>买家提货</zan-step>
+      <zan-step>交易完成</zan-step>
     </zan-steps>
   </div>
 </template>
 
 <script>
+export default {
+  data() {
+    return {
+      active: 0
+    };
+  },
 
+  methods: {
+    nextStep() {
+      if (++this.active > 3) this.active = 0;
+    }
+  }
+}
 </script>
 
 <style>
 .steps-success {
   color: #06bf04;
 }
+
+.page-steps {
+  .page-sub-title {
+    padding: 20px 15px;
+  }
+
+  .zan-button {
+    margin-left: 15px;
+  }
+}
 </style>

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: {
+  beforeCreate() {
-    title: String
+    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>

packages/zanui-css/src/steps.css

@@ -1,25 +1,28 @@
 @import "./common/var.css";
+@import "./mixins/ellipsis.css";
 
 @component-namespace zan {
   @b steps {
-    padding: 15px 0;
+    overflow: hidden;
+    padding: 0 10px;
 
-    .zan-icon {
+    @m 4 {
+      .zan-step {
+        width: 33.2%;
+      }
+    }
+
+    @e icon {
       font-size: 40px;
       line-height: 1;
       float: left;
-    }
+      margin-right: 10px;
-
-    @e status {
-      padding: 0 10px;
     }
 
     @e message {
       display: table;
       height: 40px;
-      padding-right: 50px;
+      margin: 15px 0;
-      width: 100%;
-      box-sizing: border-box;
 
       .zan-steps__message-wrapper {
         display: table-cell;
@@ -34,7 +37,107 @@
 
     @e desc {
       font-size: 12px;
+      line-height: 1.5;
       color: $c-gray-dark;
+      max-height: 18px;
+      @mixin multi-ellipsis 1;
+    }
+
+    @e items {
+      margin: 0 0 10px;
+      overflow: hidden;
+      padding-bottom: 20px;
+    }
+  }
+
+  @b step {
+    font-size: 14px;
+    float: left;
+    position: relative;
+    color: $c-gray-dark;
+
+    @m finish {
+      color: $c-black;
+
+      .zan-step__circle,
+      .zan-step__line {
+        background-color: $c-green;
+      }
+    }
+
+    @m process {
+      color: $c-black;
+
+      .zan-step__circle-container {
+        top: 24px;
+      }
+
+      .zan-icon {
+        font-size: 12px;
+        color: $c-green;
+        line-height: 1;
+        display: block;
+      }
+    }
+
+    &:first-child {
+      .zan-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      position: absolute;
+      right: 10px;
+      width: auto;
+
+      .zan-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+
+      .zan-step__circle-container {
+        left: auto;
+        right: -6px;
+      }
+
+      .zan-step__line {
+        width: 0;
+      }
+    }
+
+    .zan-step__circle-container {
+      position: absolute;
+      top: 28px;
+      left: -8px;
+      padding: 0 8px;
+      background-color: #fff;
+      z-index: 1;
+    }
+
+    @e circle {
+      display: block;
+      width: 5px;
+      height: 5px;
+      background-color: #888;
+      border-radius: 50%;
+    }
+
+    @e title {
+      font-size: 12px;
+      transform: translate3d(-50%, 0, 0);
+      display: inline-block;
+      margin-left: 3px;
+    }
+
+    @e line {
+      position: absolute;
+      left: 0px;
+      top: 30px;
+      width: 100%;
+      height: 1px;
+      background-color: $c-gray-light;
     }
   }
 }