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 }
封装了一个element加载动画的工具类
最新推荐文章于 2024-04-02 13:21:29 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)