1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <template>
| <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';
|
| const prefixCls = 'ivu-loading-bar';
|
| export default {
| name: 'LoadingBar',
| 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
| // }
| },
| data () {
| return {
| percent: 0,
| // color: 'primary',
| // failedColor: 'error',
| // height: 2,
| status: 'success',
| show: 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>
|
|
