封装js插件（loading）

在loading文件夹中写两个文件loading.js与loading.vue

loading.js

import Loading from './index.vue';
import Vue from 'vue';
export default()=>{
    let LoadingComponent=Vue.extend(Loading);
    let child=new LoadingComponent({//动态创建挂载点
        el:document.createElement("div"),
        data:{
            flag:false,
        },
        methods:{
            handlemount(){
                this.flag=true;
            },
            handleDestory(){
                this.flag=false;
            }
        }
    })
    document.body.appendChild(child.$mount().$el)
    return child;
}

loading.vue文件为一个loading的模版，从HTML+CSS+loading插件库中取出来的

<template>
    <div class="loader" v-if="flag">//利用v-if操控插件的显示与消失。
    <div class="loader-inner">
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name:"Movie" 
}
</script>

<style>
    .loader {
    background: #000;
    background: radial-gradient(#222, #000);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.loader-line-wrap {
    animation: 
        spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
    ;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}
.loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }

.loader-line-wrap:nth-child(1) .loader-line {
    border-color: hsl(0, 80%, 60%);
    height: 90px;
    width: 90px;
    top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
    border-color: hsl(60, 80%, 60%);
    height: 76px;
    width: 76px;
    top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
    border-color: hsl(120, 80%, 60%);
    height: 62px;
    width: 62px;
    top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
    border-color: hsl(180, 80%, 60%);
    height: 48px;
    width: 48px;
    top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
    border-color: hsl(240, 80%, 60%);
    height: 34px;
    width: 34px;
    top: 35px;
}

@keyframes spin {
    0%, 15% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>

同时在HTTP文件中，

import loading from '../lib/loading/index.js';



let vm=loading()//如果不写这个的话，则下面两步操作的可能不是一个vm，所以在这一步，将
vm对象存起来。



//vm.handlemount();在数据请求的时候显示loading

server.interceptors.request.use((config)=>{
    if(config.method.toUpperCase()==="GET"){
        config.params={...config.data}
    }else if(config.method.toUpperCase()==="POST"){
        config.header["content-type"]="appliaction/x-www-form-urlencoded"
    }
    vm.handlemount();
    return config;
},(err)=>{
    Promise.reject(err);
})



//vm.handleDestory();在数据传回来的时候去掉loading。
  server.interceptors.response.use((res)=>{
    if(res.statusText=="OK"){
        vm.handleDestory();
        return res.data;
    }
},(err)=>{
    Promise.reject(err);
})

export default (method,url,data={})=>{
    if(method.toUpperCase()=="GET"){
        return server.get(url,{
            params:data
        })
    }else if(method.toUpperCase()=="POST"){
        return server.post(url,data);
    }