Merge pull request #325 from huixisheng/feature-steps

support Steps

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

@@ -3,7 +3,7 @@
         <div :class="[prefixCls + '-tail']"><i></i></div>
         <div :class="[prefixCls + '-head']">
             <div :class="[prefixCls + '-head-inner']">
-                <span v-if="!icon && status != 'finish' && status != 'error'">{{ stepNumber }}</span>
+                <span v-if="!icon && currentStatus != 'finish' && currentStatus != 'error'">{{ stepNumber }}</span>
                 <span v-else :class="iconClasses"></span>
             </div>
         </div>
@@ -42,14 +42,18 @@
                 prefixCls: prefixCls,
                 stepNumber: '',
                 nextError: false,
-                total: 1
+                total: 1,
+                currentStatus: ''
             };
         },
+        created () {
+            this.currentStatus = this.status;
+        },
         computed: {
             wrapClasses () {
                 return [
                     `${prefixCls}-item`,
-                    `${prefixCls}-status-${this.status}`,
+                    `${prefixCls}-status-${this.currentStatus}`,
                     {
                         [`${prefixCls}-custom`]: !!this.icon,
                         [`${prefixCls}-next-error`]: this.nextError
@@ -62,9 +66,9 @@
                 if (this.icon) {
                     icon = this.icon;
                 } else {
-                    if (this.status == 'finish') {
+                    if (this.currentStatus == 'finish') {
                         icon = 'ios-checkmark-empty';
-                    } else if (this.status == 'error') {
+                    } else if (this.currentStatus == 'error') {
                         icon = 'ios-close-empty';
                     }
                 }
@@ -84,8 +88,9 @@
             }
         },
         watch: {
-            status () {
+            status (val) {
-                if (this.status == 'error') {
+                this.currentStatus = val;
+                if (this.currentStatus == 'error') {
                     this.$parent.setNextError();
                 }
             }

src/components/steps/steps.vue

@@ -43,7 +43,7 @@
                 ];
             }
         },
-        ready () {
+        mounted () {
             this.updateChildProps(true);
             this.setNextError();
             this.updateCurrent(true);
@@ -60,38 +60,42 @@
 
                     // 如果已存在status,且在初始化时,则略过
                     // todo 如果当前是error,在current改变时需要处理
-                    if (!(isInit && child.status)) {
+                    if (!(isInit && child.currentStatus)) {
                         if (index == this.current) {
                             if (this.status != 'error') {
-                                child.status = 'process';
+                                child.currentStatus = 'process';
                             }
                         } else if (index < this.current) {
-                            child.status = 'finish';
+                            child.currentStatus = 'finish';
                         } else {
-                            child.status = 'wait';
+                            child.currentStatus = 'wait';
                         }
                     }
 
-                    if (child.status != 'error' && index != 0) {
+                    if (child.currentStatus != 'error' && index != 0) {
                         this.$children[index - 1].nextError = false;
                     }
                 });
             },
             setNextError () {
                 this.$children.forEach((child, index) => {
-                    if (child.status == 'error' && index != 0) {
+                    if (child.currentStatus == 'error' && index != 0) {
                         this.$children[index - 1].nextError = true;
                     }
                 });
             },
             updateCurrent (isInit) {
+                // 防止溢出边界
+                if (this.current < 0 || this.current >= this.$children.length ) {
+                    return;
+                }
                 if (isInit) {
-                    const current_status = this.$children[this.current].status;
+                    const current_status = this.$children[this.current].currentStatus;
                     if (!current_status) {
-                        this.$children[this.current].status = this.status;
+                        this.$children[this.current].currentStatus = this.status;
                     }
                 } else {
-                    this.$children[this.current].status = this.status;
+                    this.$children[this.current].currentStatus = this.status;
                 }
             }
         },

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>
@@ -33,6 +31,11 @@
         <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
         <Step title="验证邮箱" icon="email"></Step>
     </Steps>
+    <Steps :current="-1" direction="vertical">
+        <Step title="注册" icon="person-add"></Step>
+        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="验证邮箱" status="finish" icon="email"></Step>
+    </Steps>
     <br>
     <p>当前正在进行第 {{ current + 1 }} 步</p>
     <Steps :current="current">
@@ -41,8 +44,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 +60,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 +86,6 @@
 
         },
         methods: {
-            setPage (page) {
-                console.log(page)
-            },
             next () {
                 if (this.current == 3) {
                     this.current = 0;