【Loading封装修改--留用笔记】Element-UI加载动画的封装修改

在用Vue和Element-ui搭建后台管理系统的时候，应设计要求，在页面数据请求，数据还没响应到页面的时候给页面加上一个加载中的效果。

由于使用的是Element-ui所以还是考虑使用相同组件库的ui，这样尽量做到页面的风格统一。

下面是封装的代码

import { Loading } from 'element-ui';
 
let loadingCount = 0;
let loading;
 
const startLoading = () => {
  loading = Loading.service({
    lock: true,
    text: '加载请求中...',//可以自定义文字
    spinner:'el-icon-loading',//自定义加载图标类名
    background: 'rgba(0, 0, 0, 0.7)'//遮罩层背景色
  });
};
 
const endLoading = () => {
  loading.close();
};
 
export const showLoading = () => {
  if (loadingCount === 0) {
    startLoading();
  }
  loadingCount += 1;
};
 
export const hideLoading = () => {
  if (loadingCount <= 0) {
    return;
  }
  loadingCount -= 1;
  if (loadingCount === 0) {
    endLoading();
  }
};

调用时

由于是在数据请求中使用&#