Blame view

components/loading-bar/index.js 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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
  import LoadingBar from './loading-bar';
  
  let loadingBarInstance;
  let color = 'primary';
  let failedColor = 'error';
  let height = 2;
  let timer;
  
  function getLoadingBarInstance () {
      loadingBarInstance = loadingBarInstance || LoadingBar.newInstance({
          color: color,
          failedColor: failedColor,
          height: height
      });
  
      return loadingBarInstance;
  }
  
  function update(options) {
      let instance  = getLoadingBarInstance();
  
      instance.update(options);
  }
  
  function hide() {
      setTimeout(() => {
          update({
              show: false
          });
          setTimeout(() => {
              update({
                  percent: 0
              });
          }, 200)
      }, 800);
  }
  
  function clearTimer() {
      if (timer) {
          clearInterval(timer);
          timer = null;
      }
  }
  
  export default {
      start () {
          let percent = 0;
  
          update({
              percent: percent,
              status: 'success',
              show: true
          });
  
          timer = setInterval(() => {
              percent += Math.floor(Math.random () * 3 + 5);
              if (percent > 95) {
                  clearTimer();
              }
              update({
                  percent: percent,
                  status: 'success',
                  show: true
              });
          }, 200);
      },
      update (percent) {
          clearTimer();
          update({
              percent: percent,
              status: 'success',
              show: true
          });
      },
      finish () {
          clearTimer();
          update({
              percent: 100,
              status: 'success',
              show: true
          });
          hide();
      },
      error () {
          clearTimer();
          update({
              percent: 100,
              status: 'error',
              show: true
          });
          hide();
      },
      config (options) {
          if (options.color) {
              color = options.color;
          }
          if (options.failedColor) {
              failedColor = options.failedColor;
          }
          if (options.height) {
              height = options.height;
          }
      },
      destroy () {
          clearTimer();
          let instance = getLoadingBarInstance();
          loadingBarInstance = null;
          instance.destroy();
      }
  }