From f97e5bb01ad9aa43431d73cc0a6c34afad9c95bb Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Thu, 9 Mar 2017 17:29:40 +0800
Subject: [PATCH] support LoadingBar

---
 CHANGE.md                                  |  3 +++
 README.md                                  |  2 +-
 examples/app.vue                           |  1 +
 examples/main.js                           |  4 ++++
 examples/routers/loading-bar.vue           | 29 +++++++++++++++++++++++++++++
 src/components/loading-bar/loading-bar.vue | 48 ++++++++++++++++++++++++++++++------------------
 src/index.js                               |  6 +++---
 7 files changed, 71 insertions(+), 22 deletions(-)
 create mode 100644 examples/routers/loading-bar.vue

diff --git a/CHANGE.md b/CHANGE.md
index eb4c71f..ae7a4b1 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -46,3 +46,6 @@ model 改为 value，支持 v-model
 ### Page
 class 改为 className
 ### DatePicker
+使用 v-model
+### LoadingBar
+部分 prop 移至 data
\ No newline at end of file
diff --git a/README.md b/README.md
index 614f562..bdf4cbd 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@
 - [x] Page
 - [x] Breadcrumb
 - [x] Steps
-- [ ] LoadingBar
+- [x] LoadingBar
 - [x] Circle
 - [x] Affix
 - [x] BackTop
diff --git a/examples/app.vue b/examples/app.vue
index 71fb03c..9e9afeb 100644
--- a/examples/app.vue
+++ b/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>
diff --git a/examples/main.js b/examples/main.js
index af7ad53..9018545 100644
--- a/examples/main.js
+++ b/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')
+        }
     ]
 });
 
diff --git a/examples/routers/loading-bar.vue b/examples/routers/loading-bar.vue
new file mode 100644
index 0000000..9f21a87
--- /dev/null
+++ b/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>
diff --git a/src/components/loading-bar/loading-bar.vue b/src/components/loading-bar/loading-bar.vue
index 23d4278..cb62cbf 100644
--- a/src/components/loading-bar/loading-bar.vue
+++ b/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 () {
diff --git a/src/index.js b/src/index.js
index a88bbef..198d97f 100644
--- a/src/index.js
+++ b/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;
--
libgit2 0.21.4