support Steps

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

support Steps
fixed npm run dev error with cann't find module vue-template-compiler update test demo style :
huixisheng
1 parent a804d608
Showing 8 changed files with 32 additions and 40 deletions Show diff stats
build/webpack.dev.config.js
package.json
src/components/steps/step.vue
src/components/steps/steps.vue
src/index.js
test/app.vue
test/main.js
test/routers/step.vue → test/routers/steps.vue
@@ -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 = {
@@ -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"
   }
@@ -21,11 +21,11 @@
  
     export default {
         props: {
-            status: {
-                validator (value) {
-                    return oneOf(value, ['wait', 'process', 'finish', 'error']);
-                }
-            },
+            // status: {
+            //     validator (value) {
+            //         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: {
@@ -43,7 +43,7 @@
                 ];
             }
         },
-        ready () {
+        mounted () {
             this.updateChildProps(true);
             this.setNextError();
             this.updateCurrent(true);
@@ -31,7 +31,7 @@ import Radio from &#39;./components/radio&#39;;
 // 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,
-    // Steps,
+    Step: Steps.Step,
+    Steps,
     // Switch,
     // iTable: Table,
     // Tabs: Tabs,
@@ -2,26 +2,15 @@
     @import "../src/styles/index.less";
 </style>
 <style scoped>
-nav {
-    margin-bottom: 40px;
-}
-
-li {
-    display: inline-block;
-}
-
-li + li {
-    border-left: solid 1px #bbb;
-    padding-left: 5px;
-    margin-left: 5px;
-}
-
-.v-link-active {
-    color: #bbb;
-}
+nav { 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; }
+.container{ padding: 10px 40px; }
+.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>
@@ -40,6 +40,10 @@ const router = new VueRouter({
         {
             path: '/checkbox',
             component: require('./routers/checkbox.vue')
+        },
+        {
+          path: '/steps',
+          component: require('./routers/steps.vue')
         }
     ]
 });
-<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;