Js widget package (loading)

Write two papers loading.js and loading.vue in loading folders

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 file as a template, remove it from the HTML + CSS + loading plug-in library

  1 <Template>
   2      <div class = " Loader " V- IF = " Flag " > // use v-if manipulation plug-in show and disappear. 
  . 3      <div class = " Loader-Inner " >
   . 4          <div class = " Loader-Line-wrap " >
   . 5              <div class = " Loader-Line " > </ div>
   . 6          </ div>
="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>

Meanwhile in the HTTP file,

. 1 Import loading from  ' ../lib/loading/index.js ' ;
 2  
. 3  
. 4  
. 5 vm = loading () the let // If this is not written, it is likely not a two-step process following vm, so this step the 
6  vm objects saved.
. 7  
. 8  
. 9  
10  // vm.handlemount (); when loading the display data request 
. 11  
12 is server.interceptors.request.use ((config) => {
 13 is      IF (config.method.toUpperCase () === " the GET " ) {
 14          config. the params = {...} config.data
 15      } the 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     }