step component

build/bin/build-entry.js

@@ -16,9 +16,9 @@ const install = function(Vue) {
 };
 
 // auto install
-if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue);
-}
+// if (typeof window !== 'undefined' && window.Vue) {
+//   install(window.Vue);
+// }
 
 module.exports = {
   install,

docs/examples-docs/steps.md

@@ -1,4 +1,4 @@
 ## Steps 步骤条
 
-
+### 基础用法
 

docs/examples/steps.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="page-steps">
+    <h1 class="page-title">Steps</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-steps icon="topay">
+    </zan-steps>
+  </div>
+</template>
+
+<script>
+
+</script>

package.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
-    "dev": "npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js",
+    "dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
     "build:file": "node build/bin/build-entry.js",
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
     "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",

packages/steps/src/step.vue

@@ -6,6 +6,10 @@
 
 <script>
 export default {
-  name: 'zan-step'
+  name: 'zan-step',
+
+  props: {
+    title: String
+  }
 };
 </script>

packages/steps/src/steps.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="zan-steps">
-    <div class="zan-steps__desc"></div>
+    <div class="zan-steps__desc" v-if="icon">
+      <i class="zan-icon" :class="computedIconClass"></i>
+    </div>
     <div class="zan-steps__items">
       <slot></slot>
     </div>
@@ -8,7 +10,25 @@
 </template>
 
 <script>
-  export default {
-    name: 'zan-steps'
-  };
+export default {
+  name: 'zan-steps',
+
+  props: {
+    active: Number,
+    icon: String,
+    iconClass: String,
+    title: String,
+    description: String
+  },
+
+  computed: {
+    computedIconClass() {
+      let iconName = `zan-icon-${this.icon}`;
+      let result = (iconClass && iconClass.split(' ')) || [];
+      result.push(iconName);
+
+      return result;
+    }
+  }
+};
 </script>

packages/zanui-css/src/icon.css

@@ -63,4 +63,4 @@
 .zan-icon-sign:before { content: '\e80d'; } /* '' */
 .zan-icon-store:before { content: '\e80e'; } /* '' */
 .zan-icon-topay:before { content: '\e80f'; } /* '' */
-.zan-icon-tosend:before { content: '\e810'; } /* '' */
+.zan-icon-tosend:before { content: '\e810'; } /* '' */

packages/zanui-css/src/steps.css

@@ -1,5 +1,7 @@
+@import "./common/var.css";
+
 @component-namespace zan {
   @b steps {
-    color: red;
+    padding: 15px 0;
   }
 }

src/index.js

@@ -48,7 +48,7 @@ const install = function(Vue) {
   Vue.component(Step.name, Step);
 };
 
-// auto install
+auto install
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }