vue 全局loading的思路和方法_vue this.$loading

Vue 全局 loading 的实现思路一般是在 Vue 实例中添加一个 loading 组件，通过控制该组件的显示和隐藏来实现全局 loading 的效果。

具体思路如下：

1. 创建一个全局的 Vue 组件 Loading，该组件用于显示 loading 状态。
   

<template>
  <div class="loader" v-show="visible">
    <div class="inner one"></div>
    <div class="inner two"></div>
    <div class="inner three"></div>
    <!-- <p class="loader_text">加载中... ...</p> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // visible: false,
    };
  },
  props: {
    visible: Boolean,
  },
  methods: {
    // show() {
    //     console.log("显示loading");
    //   this.visible = true;
    // },
    // hide() {
    //     console.log("隐藏loading");
    //   this.visible = false;
    // },
  },
  mounted() {
    this.$nextTick(() => {
      this.visible = false;
    });
  },
};
</script>

<style scoped>
.loader {
  position: fixed;
  top: calc(50% - 150px);
  left: calc(50% - 82px);
  width: 164px;
  height: 164px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1.4s linear infinite;
  border-bottom: 6px solid #0060ca;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1.4s linear infinite;
  border-right: 6px solid #ffbf00;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1.4s linear infinite;
  border-top: 6px solid #29dcf1;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
.loader_text {
  font-size: 25px;
  color: #0060ca;
  text-align: center;
  padding-top: 190px;
}
</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
110
111

2. 创建一个js文件 loading.js

import Vue from "vue";
import componentLoading from "../../components/overallLoading";

const comLoading = Vue.extend(componentLoading);

const instance = new comLoading({
    el: document.createElement("div"),
});

instance.visible = false;
const loading = {
    show() {
        instance.visible = true;
        document.body.appendChild(instance.$el);
    },
    hide() {
        instance.visible = false;
    },
};
export default {
    install() {
        if (!Vue.$loading) {
            Vue.$loading = loading;
        }
        Vue.mixin({
            created() {
                this.$loading = Vue.$loading;
            },
        });
    },
};

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

3. 在 main.js 中注册 Loading 组件，并挂载到 Vue 实例上。

// 全局引入loading
import loadong from "./assets/js/loading";
Vue.use(loadong);

new Vue({
  el: '#app',
  render: h => h(App)
});
1
2
3
4
5
6
7
8

在需要显示 loading 的地方，调用全局方法 $loading.show()，该方法通过修改 loading 组件的状态来显示 loading。
在需要隐藏 loading 的地方，调用全局方法 $loading.hide()，该方法通过修改 loading 组件的状态来隐藏 loading。

全局使用：
	this.$loading.show();
    this.$loading.hide();
1
2
3