关于前端:vue组件封装-loading框

在前端开发中很多中央都须要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) {

// 在发送申请之前展现loadingloading.showLoading()console.log('申请拦挡')return config;

}, function (error) {

// 对申请谬误做些解决console.log('申请错误处理')return Promise.reject(error);

});

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

// 响应后敞开loadingloading.closeLoading()console.log('响应拦挡')return response;

}, function (error) {

// 对响应谬误也要敞开loadingloading.closeLoading()console.log('响应谬误')return Promise.reject(error);

});