support Steps

fixed npm run dev error with  cann't find module vue-template-compiler
update test demo style
:

build/webpack.dev.config.js

@@ -4,7 +4,7 @@
 
 var path = require('path');
 var webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+// var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {

package.json

@@ -76,6 +76,7 @@
     "vue-loader": "^11.0.0",
     "vue-router": "^2.2.1",
     "vue-style-loader": "^1.0.0",
+    "vue-template-compiler": "^2.2.1",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.4.1"
   }

src/components/steps/step.vue

@@ -21,11 +21,11 @@
 
     export default {
         props: {
-            status: {
+            // status: {
-                validator (value) {
+            //     validator (value) {
-                    return oneOf(value, ['wait', 'process', 'finish', 'error']);
+            //         return oneOf(value, ['wait', 'process', 'finish', 'error']);
-                }
+            //     }
-            },
+            // },
             title: {
                 type: String,
                 default: ''
@@ -42,7 +42,8 @@
                 prefixCls: prefixCls,
                 stepNumber: '',
                 nextError: false,
-                total: 1
+                total: 1,
+                status: ''
             };
         },
         computed: {

src/components/steps/steps.vue

@@ -43,7 +43,7 @@
                 ];
             }
         },
-        ready () {
+        mounted () {
             this.updateChildProps(true);
             this.setNextError();
             this.updateCurrent(true);

src/index.js

@@ -31,7 +31,7 @@ import Radio from './components/radio';
 // import Rate from './components/rate';
 // import Slider from './components/slider';
 // import Spin from './components/spin';
-// import Steps from './components/steps';
+import Steps from './components/steps';
 // import Switch from './components/switch';
 // import Table from './components/table';
 // import Tabs from './components/tabs';
@@ -96,8 +96,8 @@ const iview = {
     // iSelect: Select,
     // Slider,
     // Spin,
-    // Step: Steps.Step,
+    Step: Steps.Step,
-    // Steps,
+    Steps,
     // Switch,
     // iTable: Table,
     // Tabs: Tabs,

test/app.vue

@@ -2,26 +2,15 @@
     @import "../src/styles/index.less";
 </style>
 <style scoped>
-nav {
+nav { margin-bottom: 40px; }
-    margin-bottom: 40px;
+ul { display: flex; flex-wrap: wrap; }
-}
+li { display: inline-block; }
-
+li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
-li {
+.container{ padding: 10px 40px; }
-    display: inline-block;
+.v-link-active { color: #bbb; }
-}
-
-li + li {
-    border-left: solid 1px #bbb;
-    padding-left: 5px;
-    margin-left: 5px;
-}
-
-.v-link-active {
-    color: #bbb;
-}
 </style>
 <template>
-    <div>
+    <div class="container">
         <nav>
             <ul>
                 <li><router-link to="/affix">Affix</router-link></li>
@@ -30,6 +19,7 @@ li + li {
                 <li><router-link to="/input">Input</router-link></li>
                 <li><router-link to="/radio">Radio</router-link></li>
                 <li><router-link to="/checkbox">Checkbox</router-link></li>
+                <li><router-link to="/steps">Steps</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -40,6 +40,10 @@ const router = new VueRouter({
         {
             path: '/checkbox',
             component: require('./routers/checkbox.vue')
+        },
+        {
+          path: '/steps',
+          component: require('./routers/steps.vue')
         }
     ]
 });

test/routers/steps.vue

@@ -1,7 +1,5 @@
-<style>
-
-</style>
 <template>
+<div>
     <Steps :current="1" size="small">
         <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
         <Step title="进行中" content="这里是该步骤的描述信息"></Step>
@@ -41,8 +39,9 @@
         <Step title="步骤3"></Step>
         <Step title="步骤4"></Step>
     </Steps>
-    <i-button type="primary" @click="next">下一步</i-button>
+    <br>
-    <br><br>
+    <Button type="primary" @click.native="next">下一步</Button>
+    <br><br><br>
     <Steps :current="1" direction="vertical" size="small">
         <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
         <Step title="进行中" content="这里是该步骤的描述信息"></Step>
@@ -56,18 +55,18 @@
         <Step title="待进行" content="这里是该步骤的描述信息"></Step>
         <Step title="待进行" content="这里是该步骤的描述信息"></Step>
     </Steps>
+</div>
 </template>
 <script>
-    import { Page, Steps, iButton } from 'iview';
+    import { Steps, Button } from 'iview';
 
     const Step = Steps.Step;
 
     export default {
         components: {
-            Page,
             Steps,
             Step,
-            iButton
+            Button
         },
         props: {
 
@@ -82,9 +81,6 @@
 
         },
         methods: {
-            setPage (page) {
-                console.log(page)
-            },
             next () {
                 if (this.current == 3) {
                     this.current = 0;