vue组件封装- loading框

Posted 2021-09-07 qqcc

在前端开发中很多地方都需要loading,下面咱们就看下如何在vue中实现一个全局的loading框，并且将其封装到axios中，实现发送请求时自动显示loading框，请求结束自动关闭loading框。

首先建一个 loading.vue 的页面

<template>

<div class="loadEffect _loadEffect">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

</template>

<script>

export default {
    data() {
        return {};
    }
};

</script>

<style lang="scss" scoped>

.loadEffect {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    top: -60%;
    z-index: 9999;
    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #Fa3;
        position: absolute;
        animation: load 1.04s ease infinite;
        &:nth-child(1) {
             left: 0;
             top: 50%;
             margin-top: -10px;
             animation-delay: 0.13s;
         }
        &:nth-child(2) {
             left: 14px;
             top: 14px;
             animation-delay: 0.26s;
         }
        &:nth-child(3) {
             left: 50%;
             top: 0;
             margin-left: -10px;
             animation-delay: 0.39s;
         }
        &:nth-child(4) {
             top: 14px;
             right: 14px;
             animation-delay: 0.52s;
         }
        &:nth-child(5){
             right: 0;
             top: 50%;
             margin-top: -10px;
             animation-delay: 0.65s;
         }
        &:nth-child(6) {
             right: 14px;
             bottom:14px;
             animation-delay: 0.78s;
         }
        &:nth-child(7) {
             bottom: 0;
             left: 50%;
             margin-left: -10px;
             animation-delay: 0.91s;
         }
        &:nth-child(8) {
             bottom: 14px;
             left: 14px;
             animation-delay: 1.04s;
         }
    }
    @keyframes load{
        0% {
            transform: scale(1.2);
            opacity: 1;
        }
        100% {
            transform: scale(.3);
            opacity: 0.5;
        }
    }
}

</style>
为了方便调用，我们需要把loading组件封装成可函数式调用的API。

Vue.extend()可以生成一个 Vue 的子类构造函数，因为loading组件本身是一个vue实例，将其作为参数生成一个子类构造函数，只要动态操作loading的挂载元素el，便可以实现loading组件的函数式调用。创建loading.js，实现如下：

import Vue from \'vue\';
import loading from \'./loading.vue\';

// 扩展实例构造器
const LoadingConstructor = Vue.extend(loading);

// 创建一个vue实例，挂载元素为新创建的div
let initLoadingInstance = function () {

return new LoadingConstructor({
    el: document.createElement(\'div\'),
});

}

// 删除dom节点
let removeDom = (node) => { if (node.parentNode) {

node.parentNode.removeChild(node);

}
};

let instance = initLoadingInstance();

// 关闭loading
let closeLoading = () => {

removeDom(instance.$el)

};

// 展示loading
let showLoading = function () {

document.body.appendChild(instance.$el);

}

export default {

showLoading,
closeLoading

}
这样只要通过调用函数showLoading()和closeLoading()就可以展示和关闭loading框了。实现了loading框的函数式调用，那么如何实现在请求发送开始时自动调用loading框，在请求结束自动关闭loading框呢，这就涉及到请求和响应的拦截。

axios拦截请求和响应

我们使用axios作为ajax请求的处理框架，axios支持请求的拦截和响应，具体可以参见 axios文档然后在main.js中引入axios，在其请求拦截器中展示loading框，在响应拦截器中关闭loading框。代码如下：

//引入 js

import loading from \'./components/common/loading.js\'

// 拦截请求
axios.interceptors.request.use(function (config) {

// 在发送请求之前展示loading
loading.showLoading()
console.log(\'请求拦截\')
return config;

}, function (error) {

// 对请求错误做些处理
console.log(\'请求错误处理\')
return Promise.reject(error);

});

// 拦截响应
axios.interceptors.response.use(function (response) {

// 响应后关闭loading
loading.closeLoading()
console.log(\'响应拦截\')
return response;

}, function (error) {

// 对响应错误也要关闭loading
loading.closeLoading()
console.log(\'响应错误\')
return Promise.reject(error);

});