add LoadingBar component

2016-09-22 13:42:59 +08:00 · 2016-09-22 13:42:59 +08:00 · 9dde24b629
commit 9dde24b629
parent 4ec205b68d
14 changed files with 299 additions and 25 deletions
--- a/components/loading-bar/loading-bar.vue
+++ b/components/loading-bar/loading-bar.vue
@ -0,0 +1,77 @@
+<template>
+    <div :class="classes" :style="outerStyles" v-show="show" transition="fade">
+        <div :class="innerClasses" :style="styles"></div>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-loading-bar';
+
+    export default {
+        props: {
+            percent: {
+                type: Number,
+                default: 0
+            },
+            color: {
+                type: String,
+                default: 'primary'
+            },
+            failedColor: {
+                type: String,
+                default: 'error'
+            },
+            height: {
+                type: Number,
+                default: 2
+            },
+            status: {
+                type: String,
+                validator (value) {
+                    return oneOf(value, ['success', 'error']);
+                },
+                default: 'success'
+            },
+            show: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            },
+            innerClasses () {
+                return [
+                    `${prefixCls}-inner`,
+                    {
+                        [`${prefixCls}-inner-color-primary`]: this.color === 'primary' && this.status === 'success',
+                        [`${prefixCls}-inner-failed-color-error`]: this.failedColor === 'error' && this.status === 'error'
+                    }
+                ]
+            },
+            outerStyles () {
+                return {
+                    height: `${this.height}px`
+                }
+            },
+            styles () {
+                let style = {
+                    width: `${this.percent}%`,
+                    height: `${this.height}px`
+                };
+
+                if (this.color !== 'primary' && this.status === 'success') {
+                    style.backgroundColor = this.color;
+                }
+
+                if (this.failedColor !== 'error' && this.status === 'error') {
+                    style.backgroundColor = this.failedColor;
+                }
+
+                return style;
+            }
+        }
+    }
+</script>