全局进度条
# 全局进度条
let LoadingTip = Vue.extend({
template: `
<div id="vue-loading" class="loading__wrapper">
<div class="loading_contend">
<title class="loading_title">{{loadingTitle}}</title>
<el-progress :percentage="loadingNum"></el-progress>
</div>
</div>`,
data: function () {
return {
// loadingNum: store.state.iomsFrontendStore.loadingJson.loadingNum
};
},
computed: {
loadingTitle() {
return store.state.loadingJson.loadingTitle;
},
loadingNum() {
return store.state.loadingJson.loadingNum;
}
}
});
// 2、创建实例,挂载到文档以后的地方
let tpl = new LoadingTip().$mount().$el;
export function startLoading() {
// 3、把创建的实例添加到body中
document.body.appendChild(tpl);
// 阻止遮罩滑动
document.querySelector('#vue-loading').addEventListener('touchmove', function (e) {
e.stopPropagation();
e.preventDefault();
});
}
export function endLoading() {
if (document.querySelector('#vue-loading')) {
let tpl = document.querySelector('#vue-loading');
document.body.removeChild(tpl);
}
}
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
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
上次更新: 2023/06/01, 12:40:50