Blame view

src/components/loading-bar/loading-bar.vue 2.18 KB
9dde24b6   梁灏   add LoadingBar co...
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
  <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'
                      }
b0893113   jingsam   :art: add eslint
52
                  ];
9dde24b6   梁灏   add LoadingBar co...
53
54
55
56
              },
              outerStyles () {
                  return {
                      height: `${this.height}px`
b0893113   jingsam   :art: add eslint
57
                  };
9dde24b6   梁灏   add LoadingBar co...
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
              },
              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;
              }
          }
b0893113   jingsam   :art: add eslint
76
77
      };
  </script>