封装js插件（loading）

在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      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      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      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      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      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      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      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      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     }