在loading文件夹中写两个文件loading.js与loading.vue
loading.js
1 import Loading from './index.vue';
2 import Vue from 'vue';
3 export default()=>{
4 let LoadingComponent=Vue.extend(Loading);
5 let child=new LoadingComponent({//动态创建挂载点
6 el:document.createElement("div"),
7 data:{
8 flag:false,
9 },
10 methods:{
11 handlemount(){
12 this.flag=true;
13 },
14 handleDestory(){
15 this.flag=false;
16 }
17 }
18 })
19 document.body.appendChild(child.$mount().$el)
20 return child;
21 }
loading.vue文件为一个loading的模版，从HTML+CSS+loading插件库中取出来的
1 <template>
2 <div class="loader" v-if="flag">//利用v-if操控插件的显示与消失。
3 <div class="loader-inner">
4 <div class="loader-line-wrap">
5 <div class="loader-line"></div>
6 </div>
7 <div class="loader-line-wrap">
8 <div class="loader-line"></div>
9 </div>
10 <div class="loader-line-wrap">
11 <div class="loader-line"></div>
12 </div>
13 <div class="loader-line-wrap">
14 <div class="loader-line"></div>
15 </div>
16 <div class="loader-line-wrap">
17 <div class="loader-line"></div>
18 </div>
19 </div>
20 </div>
21 </template>
22
23 <script>
24 export default {
25 name:"Movie"
26 }
27 </script>
28
29 <style>
30 .loader {
31 background: #000;
32 background: radial-gradient(#222, #000);
33 bottom: 0;
34 left: 0;
35 overflow: hidden;
36 position: fixed;
37 right: 0;
38 top: 0;
39 z-index: 99999;
40 }
41
42 .loader-inner {
43 bottom: 0;
44 height: 60px;
45 left: 0;
46 margin: auto;
47 position: absolute;
48 right: 0;
49 top: 0;
50 width: 100px;
51 }
52
53 .loader-line-wrap {
54 animation:
55 spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
56 ;
57 box-sizing: border-box;
58 height: 50px;
59 left: 0;
60 overflow: hidden;
61 position: absolute;
62 top: 0;
63 transform-origin: 50% 100%;
64 width: 100px;
65 }
66 .loader-line {
67 border: 4px solid transparent;
68 border-radius: 100%;
69 box-sizing: border-box;
70 height: 100px;
71 left: 0;
72 margin: 0 auto;
73 position: absolute;
74 right: 0;
75 top: 0;
76 width: 100px;
77 }
78 .loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
79 .loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
80 .loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
81 .loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
82 .loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
83
84 .loader-line-wrap:nth-child(1) .loader-line {
85 border-color: hsl(0, 80%, 60%);
86 height: 90px;
87 width: 90px;
88 top: 7px;
89 }
90 .loader-line-wrap:nth-child(2) .loader-line {
91 border-color: hsl(60, 80%, 60%);
92 height: 76px;
93 width: 76px;
94 top: 14px;
95 }
96 .loader-line-wrap:nth-child(3) .loader-line {
97 border-color: hsl(120, 80%, 60%);
98 height: 62px;
99 width: 62px;
100 top: 21px;
101 }
102 .loader-line-wrap:nth-child(4) .loader-line {
103 border-color: hsl(180, 80%, 60%);
104 height: 48px;
105 width: 48px;
106 top: 28px;
107 }
108 .loader-line-wrap:nth-child(5) .loader-line {
109 border-color: hsl(240, 80%, 60%);
110 height: 34px;
111 width: 34px;
112 top: 35px;
113 }
114
115 @keyframes spin {
116 0%, 15% {
117 transform: rotate(0);
118 }
119 100% {
120 transform: rotate(360deg);
121 }
122 }
123 </style>
同时在HTTP文件中，
1 import loading from '../lib/loading/index.js';
2
3
4
5 let vm=loading()//如果不写这个的话，则下面两步操作的可能不是一个vm，所以在这一步，将
6 vm对象存起来。
7
8
9
10 //vm.handlemount();在数据请求的时候显示loading
11
12 server.interceptors.request.use((config)=>{
13 if(config.method.toUpperCase()==="GET"){
14 config.params={...config.data}
15 }else if(config.method.toUpperCase()==="POST"){
16 config.header["content-type"]="appliaction/x-www-form-urlencoded"
17 }
18 vm.handlemount();
19 return config;
20 },(err)=>{
21 Promise.reject(err);
22 })
23
24
25
26 //vm.handleDestory();在数据传回来的时候去掉loading。
27 server.interceptors.response.use((res)=>{
28 if(res.statusText=="OK"){
29 vm.handleDestory();
30 return res.data;
31 }
32 },(err)=>{
33 Promise.reject(err);
34 })
35
36 export default (method,url,data={})=>{
37 if(method.toUpperCase()=="GET"){
38 return server.get(url,{
39 params:data
40 })
41 }else if(method.toUpperCase()=="POST"){
42 return server.post(url,data);
43 }