Quick 文档 0.2.3

Loading 加载进度条

说明

创建一个显示页面加载、异步请求、文件上传等的加载进度条。

全局进度条

teleport 把组件转移到目标元素中 (可选方式)

  • index.html
<body>
  <div id="appTopBody"></div>
  <div id="app"></div>
  <div id="endOfBody"></div>
  <script type="module" src="/src/main.js"></script>
</body>
1
2
3
4
5
6
  • App.vue
<template>
  <!-- 注入到index.html > #appTopBody -->
  <teleport to="#appTopBody">
    <!-- LoadingBar 全局加载进度组件 -->
    <LoadingBar />
</template>
1
2
3
4
5
6

网络请求

  • request.js
import fly from 'flyio';
import { quick } from 'qveui';

/**
 * 添加请求拦截器
 */
fly.interceptors.request.use((config, promise) => {
  quick.Loading.start(); //开始加载进度条
  return config;
});

/**
 * 添加响应拦截器，响应拦截器会在then/catch处理之前执行
 */
fly.interceptors.response.use(
  (response, promise) => {
    quick.Loading.finish(); //结束进度条
    return promise.resolve(response.data);
  },
  (err, promise) => {
    quick.Loading.finish(); //结束进度条
    return promise.reject(err);
  }
);
const request = fly;
export { request };
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

页面使用

>{}
<template>
  <div class="test-load-page">
    <dl>
      <dt>局部</dt>
      <dd>
        <LoadingBar named="test" style="top:1rem" color="error" />
      </dd>
      <dd>
        <Button @click="btnLoad('start', 'test')"> 进度条开始 </Button>
        <Button @click="btnLoad('finish', 'test')"> 进度条结束 </Button>

        <Button @click="btnLoad('update', 'test')"> 指定进度 </Button>
      </dd>
    </dl>

    <dl>
      <dt>全局</dt>

      <dd>
        <Button @click="btnLoad('start')"> 进度条开始 </Button>
        <Button @click="btnLoad('finish')"> 进度条结束 </Button>

        <Button @click="btnLoad('update')"> 指定进度 </Button>
      </dd>
    </dl>

    <dl>
      <dt>订阅事件</dt>
      <dd>
        <Button @click="btnSubscribe('keys')"> 所有订阅事件ID </Button>
      </dd>
      <dd>{{ the.keys }}</dd>
      <dd></dd>
    </dl>
  </div>
</template>

<script>
export default {
  setup() {
    // 使用外挂方式引入，具体查看demo
    const $plus = window.$plus;
    const reactive = $plus.vue.reactive;

    const the = reactive({
      url: '/page/help/index',
      keys: [],
    });

    const btnLoad = (val, named) => {
      // 组件命名
      named = named || 'loading';
      let resp;
      switch (val) {
        /** 进度开始 */
        case 'start':
          // console.log(qveui);
          resp = $plus.loading.start(null, named);
          console.log(JSON.stringify(resp));
          break;

        case 'finish': // 加载完成
          resp = $plus.loading.finish(named);
          console.log(JSON.stringify(resp));
          break;
        case 'update':
          console.log(val);
          resp = $plus.loading.update(
            {
              start: false,
              show: true,
              percent: 30,
            },
            named
          );
          console.log(JSON.stringify(resp));
          break;
      }
    };

    // 当前监听的事件ID
    const btnSubscribe = (val) => {
      switch (val) {
        case 'keys':
          // 全局组件keys
          the.keys = $plus.ui.subscribe.keys();
          // console.log()
          break;
      }
    };

    return { btnLoad, btnSubscribe, the };
  },
};
</script>
<style lang="less">
.test-load-page {
  dl {
    padding: 0.5rem;
    dt {
      padding: 0.5rem;
      font-size: 0.8rem;
    }
    dd {
      padding: 0.5rem;
    }
  }
}
</style>
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

API

Loading instace

函数名说明参数默认值
start开始加载订阅 id,optis
finish完成加载订阅 id,optis

LoadingBar props

  • 样式名字 progress.less
属性名说明类型默认值
id组件订阅事件名称,为空不订阅Stringon-loading-bar
named组件名称，用于组件实例区分String-
percent进度条宽度%Number0
color进度条颜色,可选值为primary errorStringprimary
show是否显示进度条Booleanfalse

Last Updated: