封装了一个element加载动画的工具类

import { Message } from 'element-ui'
/**
 * 
 * @param dom  // 容器
 * @return loading  // loading实例
 */

// 声明一个加载变量
let loading = null;
// 声明一个计时器变量
let timer = null;

// 加载动画开启的方法
async function startLoading(dom) {
    // 若快速的重复启动加载动画, 则如果上一次的动画未结束则先关闭上一次动画再重新开启动画, 调用关闭函数的方法
    if (loading !== null) { closeLoading() }
    // 如果上一次的动画定时器未清除, 则清除定时器
    if (timer !== null) { clearInterval(timer) }
    // 启动加载动画
    loading = await this.$loading({
        lock: false,                 // 是否锁屏
        text: '努力加载中...',       // 加载时的动画文字
        spring: 'el-icon-loading',             // 引入的loading图标
        target: document.querySelector(dom),  // 需要遮罩的区域
    })

    // 设定定时器，超时8S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
    timer = setTimeout(() => {
        // 5秒后判断加载是否已经关闭, 如果没关闭则调用关闭动画的函数
        if (loading !== null) {
            // 给出提示
            Message.error('加载超时! 请检查网络!')
            // 调用关闭加载动画的函数
            closeLoading()
        }
    }, 8000);

    //  返回加载动画实例
    return loading
}

// 加载动画关闭的函数
function closeLoading() {

    // 如果加载动画正在加载
    if (loading !== null) {
        // 关闭动画
        loading.close();
    }
    // 如果存在定时器
    if (timer !== null) {
        // 清除定时器
        clearInterval(timer)
    }

    // 将动画实例初始化
    loading = null
}

// 暴露startLoading方法
export { startLoading, closeLoading }