element-ui全局添加loading效果

有时候会有一个需求，就是跳转到一个页面的时候，必须要有loading，然后等该页面所有的接口都调完，才能关闭loading。中怎么处理呢？我们一般是在请求和响应拦截器中添加loading效果，我这边整理了以下两种方法。

第一种处理方法如下：

1）需要用到的第三方插件

$ npm i element-ui -S
$ npm i lodash -S
$ npm i axios -S

使用element-ui的Loading组件，这个组件有两种调用方式：
1、通过指v-loading
2、通过服务Loading.service();

2）基于element-ui进行loading二次封装组件

loading.js

import { Loading } from "element-ui";
import _ from 'lodash';
 
let loading = null;
let needRequestCount = 0;
 
 
//开启loading状态
const startLoading = (headers={}) => {
  loading = Loading.service({
    lock: true,   //是否锁定屏幕的滚动
    text: headers.text||"加载中……",  //loading下面的文字
    background: "rgba(0, 0, 0, 0.7)",  //loading的背景色
    target:headers.target||"body"      //loading显示在容器
  });
};
 
//关闭loading状态
//在关闭loading为了防止loading的闪动，采用防抖的方法，防抖计时一般采用300-600ms
//在关闭loading之后，我们需注意全局变量导致的V8垃圾回收机制，把没用的变量清空为null
const endLoading = _.debounce(() => {
  loading.close();
  loading = null;
},300);
 
 
export const showScreenLoading=(headers)=>{
   if(needRequestCount == 0&&!loading){
    startLoading(headers);
   }
   needRequestCount++;
}
 
export const hideScreenLoading=()=>{
    if(needRequestCount<=0)  return 
    needRequestCount--;
    needRequestCount = Math.max(needRequestCount, 0);
    if(needRequestCount===0){
        endLoading()
    }
}
export default {};

3）将上面封装的组件引入到utils->request文件中

import axios from "axios";
import Lockr from "lockr";
import { showScreenLoading, hideScreenLoading } from "./loading";
import { Message } from "element-ui";
 
class Service {
  construct() {
    this.baseURL = process.env.VUE_APP_URL;
    this.timeout = 3000; //请求时间
  }
  request(config) {
    let instance = axios.create({
      baseURL: this.baseURL,
      timeout: this.timeout
    });
    //请求拦截器
    instance.interceptors.request.use(
      config => {
        config.headers.Authorization = Lockr.get("token");
        if (config.headers.showLoading !== false) {
          showScreenLoading(config.headers);
        }
        return config;
      },
      error => {
        if (config.headers.showLoading !== false) {
          hideScreenLoading(config.headers);
        }
        Message.error("请求超时!");
        return Promise.reject(error);
      }
    );
    //响应拦截器
    instance.interceptors.response.use(
      response => {
        if (response.status == 200) {
          setTimeout(() => {
            if (response.config.headers.showLoading !== false) {
              hideScreenLoading();
            }
          }, 500);
          return response.data;
        }
      },
      error => {
        if (response.config.headers.showLoading !== false) {
          hideScreenLoading();
        }
        return Promise.reject(error);
      }
    );
    return instance(config);
  }
}
 
export default new Service();

第二种处理方法如下：

1）设置个全局的方法来调用生成loading

loading.js

Vue.prototype.openLoading = function() {
  const loading = this.$loading({           // 声明一个loading对象
    lock: true,                             // 是否锁屏
    text: '加载中',                         // 加载动画的文字
    spinner: 'el-icon-loading',             // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.8)',       // 背景颜色
    target: '.el-table, .table-flex, .region',       // **需要遮罩的区域，这里写要添加loading的选择器**
    fullscreen: false,
    customClass: 'loadingclass'             // **遮罩层新增类名，如果需要修改loading的样式**
  })
  setTimeout(function () {                  // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
    loading.close();                        // 关闭遮罩层
  },5000)
  return loading;
}

2）在使用loading的时候调用openLoading就行了

或者跟第一种方法一样，在拦截器里面引入和调用就是全局调用，后面调接口的时候就不需要加这一行代码了

//组件内
getlist() {
	//创建loading对象开始遮罩
	const rLoading = this.openLoading();
	//发送请求
	query().then(res => {
		//请求结束关闭loading
		rLoading.close();
	})
}

关于设置loading的样式：customClass: ‘loadingclass’，再app.vue中添加一下这个class去改loading的样式就好了

<style lang="scss">
  .loadingclass {
    .el-loading-spinner {
      i {
        color: #139cb6;
      }
      .el-loading-text {
        color: #139cb6;
      }
    }
  }
</style>

测试对比看效果：

对第一种方法的效果测试：

<template>
  <div class="twoPage">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date"  label="日期"  width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button @click="showLoading">我是个神奇的按钮</el-button>
  </div>
</template>
<script>
import { showScreenLoading, hideScreenLoading } from "@/assets/js/loading";
export default {
  data() {
    return {
      tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
       {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
       {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}
       ]
    };
  },
  mounted() {
    
  },
  methods: {
   showLoading(){
     this.loading1()
     this.loading2()
     this.loading3()
     this.loading4()
   },
   loading1(){
     console.log('打开1')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('关闭1')
     },1000)
   },
   loading2(){
     console.log('打开2')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('关闭2')
     },2000)
   },
   loading3(){
     console.log('打开3')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('关闭3')
     },3000)
   },
   loading4(){
     console.log('打开4')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('关闭4')
     },4000)
   }
  }
};
</script>
<style lang="less">

</style>

完美！！！

再对第二种方法 的效果进行测试

<template>
  <div class="twoPage">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date"  label="日期"  width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button @click="showLoading">我是个神奇的按钮</el-button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
       {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
       {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}
       ]
    };
  },
  methods: {
   showLoading(){
     this.loading1()
     this.loading2()
     this.loading3()
     this.loading4()
   },
   loading1(){
     console.log('开始1')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('结束1')
     },1000)
   },
   loading2(){
     console.log('开始2')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('结束2')
     },2000)
   },
   loading3(){
     console.log('开始3')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('结束3')
     },3000)
   },
   loading4(){
     console.log('开始4')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('结束4')
     },4000)
   },
  }
};
</script>
<style lang="less">

</style>

效果看着还行，就是有个细节问题就是：多个请求的时候打开的loading层会越来越厚，后面会越来越薄。不过效果是实现了，如果loading背景是白色可能这个弊端就不太会暴露。

结论：第一种方法看着美观，但逻辑可能稍微有点复杂，而且引入了lodash第三方插件。第二种方案也还行，但如果请求过多，相对可能透明样式有点生硬。自行选择啦~~~~

参考博客：https://blog.csdn.net/qq_41643208/article/details/125089166，https://blog.csdn.net/weixin_45685252/article/details/114917309