elementUI中loading组件的完美使用

有时候，网页数据请求太慢，在未得到数据的那一会会，时常会让心急的人怀疑是不是代码哪崩了，所以我需要一个东西来缓冲一下我等待的焦虑，在页面加载时添加一个加载动画

首先安装element-ui框架

npm i elemnt-ui -S

在main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

新建loading.js , 封装loading组件

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