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
| import Vue from "vue";
| import { Spin } from "ant-design-vue";
|
| const createFullLoading = function(){
| const instance = new Vue({
| data: {
| visible: false,
| },
| methods: {
| show() {
| this.visible = true;
| },
| hide() {
| this.visible = false;
| },
| },
| render(h, data) {
| const fullscreenStyle = {
| position: "fixed",
| left: 0,
| top: 0,
| width: "100%",
| height: "100%",
| display: this.visible?'block':'none',
| zIndex:99999999999
| }
| const maskStyle = {
| position: "absolute",
| left: 0,
| top: 0,
| width: "100%",
| height: "100%",
| zIndex:1,
| backgroundColor:'rgba(0,0,0,.2)'
| }
| const innerStyle = {
| position: "absolute",
| left: 0,
| top: 0,
| width: "100%",
| height: "100%",
| zIndex:2,
| backgroundColor:'transparent',
| display: "flex",
| justifyContent: "center",
| alignItems: "center"
| }
| return (
| <div style={fullscreenStyle}>
| <div style={maskStyle}></div>
| <div style={innerStyle}><Spin /></div>
| </div>
| )
| },
| });
| const component = instance.$mount();
| document.body.appendChild(component.$el);
| return instance
| }
|
| export default createFullLoading
|
|
