vue请求响应拦截使用封装的Loading

最新推荐文章于 2026-04-24 08:22:21 发布

转载最新推荐文章于 2026-04-24 08:22:21 发布 · 475 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://juejin.cn/post/7047030919152009247

标签

#vue.js #javascript

收录于

本文介绍了一个使用 Element UI 的 Loading 组件进行封装的方法，以便在 Vue 应用中更方便地管理和显示加载状态。通过简单的 API 调用即可全局展示或隐藏加载提示。

import { Loading } from 'element-ui';

let loading;
function startLoading() {
    loading = Loading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}
// 关闭loading事件
function endLoading() {
    loading.close()
}

// 默认状态
let needLoadingRequestCount = 0

// 开启loading
export function showFullScreenLoading() {
    if (needLoadingRequestCount === 0) {
        startLoading()
    }
    needLoadingRequestCount++
}
// 取消loading
export function tryHideFullScreenLoading() {
    if (needLoadingRequestCount <= 0) return
    needLoadingRequestCount--
    if (needLoadingRequestCount === 0) {
        endLoading()
    }
}