support LoadingBar

support LoadingBar @Jetsly

CHANGE.md

@@ -46,3 +46,6 @@ model 改为 value，支持 v-model
 ### Page
 class 改为 className
 ### DatePicker
+使用 v-model
+### LoadingBar
+部分 prop 移至 data

README.md

@@ -55,7 +55,7 @@
 - [x] Page
 - [x] Breadcrumb
 - [x] Steps
-- [ ] LoadingBar
+- [x] LoadingBar
 - [x] Circle
 - [x] Affix
 - [x] BackTop

examples/app.vue

@@ -50,6 +50,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/date">Date</router-link></li>
                 <li><router-link to="/form">Form</router-link></li>
                 <li><router-link to="/table">Table</router-link></li>
+                <li><router-link to="/loading-bar">LoadingBar</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

@@ -165,6 +165,10 @@ const router = new VueRouter({
             path: '/table',
             component: require('./routers/table.vue')
         },
+        {
+            path: '/loading-bar',
+            component: require('./routers/loading-bar.vue')
+        }
     ]
 });
 

examples/routers/loading-bar.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <i-button @click.native="start">Start</i-button>
+        <i-button @click.native="finish">Finish</i-button>
+        <i-button @click.native="error">Error</i-button>
+    </div>
+</template>
+<script>
+    export default {
+        methods: {
+            start () {
+                this.$Loading.start();
+            },
+            finish () {
+                this.$Loading.finish();
+            },
+            error () {
+                this.$Loading.error();
+            }
+        },
+        created () {
+            this.$Loading.config({
+                color: '#5cb85c',
+                failedColor: '#f0ad4e',
+                height: 5
+            });
+        }
+    }
+</script>

src/components/loading-bar/loading-bar.vue

@@ -1,7 +1,9 @@
 <template>
-    <div :class="classes" :style="outerStyles" v-show="show" transition="fade">
-        <div :class="innerClasses" :style="styles"></div>
-    </div>
+    <transition name="fade">
+        <div :class="classes" :style="outerStyles" v-show="show">
+            <div :class="innerClasses" :style="styles"></div>
+        </div>
+    </transition>
 </template>
 <script>
     import { oneOf } from '../../utils/assist';
@@ -10,10 +12,10 @@
 
     export default {
         props: {
-            percent: {
-                type: Number,
-                default: 0
-            },
+//            percent: {
+//                type: Number,
+//                default: 0
+//            },
             color: {
                 type: String,
                 default: 'primary'
@@ -26,17 +28,27 @@
                 type: Number,
                 default: 2
             },
-            status: {
-                type: String,
-                validator (value) {
-                    return oneOf(value, ['success', 'error']);
-                },
-                default: 'success'
-            },
-            show: {
-                type: Boolean,
-                default: false
-            }
+//            status: {
+//                type: String,
+//                validator (value) {
+//                    return oneOf(value, ['success', 'error']);
+//                },
+//                default: 'success'
+//            },
+//            show: {
+//                type: Boolean,
+//                default: false
+//            }
+        },
+        data () {
+            return {
+                percent: 0,
+//                color: 'primary',
+//                failedColor: 'error',
+//                height: 2,
+                status: 'success',
+                show: false
+            };
         },
         computed: {
             classes () {

src/index.js

@@ -19,7 +19,7 @@ import Form from './components/form';
 import Icon from './components/icon';
 import Input from './components/input';
 import InputNumber from './components/input-number';
-// import LoadingBar from './components/loading-bar';
+import LoadingBar from './components/loading-bar';
 import Menu from './components/menu';
 // import Message from './components/message';
 // import Modal from './components/modal';
@@ -75,7 +75,7 @@ const iview = {
     // iInput: Input,
     Input,
     InputNumber,
-    // LoadingBar,
+    LoadingBar,
     Menu,
     MenuGroup: Menu.Group,
     MenuItem: Menu.Item,
@@ -121,7 +121,7 @@ const install = function (Vue, opts = {}) {
         Vue.component(key, iview[key]);
     });
 
-    // Vue.prototype.$Loading = LoadingBar;
+    Vue.prototype.$Loading = LoadingBar;
     // Vue.prototype.$Message = Message;
     // Vue.prototype.$Modal = Modal;
     // Vue.prototype.$Notice = Notice;