Vue+antd中关于发送请求时候的Loading遮罩层闪烁无法覆盖问题

最新推荐文章于 2025-10-06 03:59:45 发布

原创最新推荐文章于 2025-10-06 03:59:45 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #antd

Vue3.0 同时被 2 个专栏收录

7 篇文章

订阅专栏

antd

6 篇文章

订阅专栏

本文介绍了一种在Vue项目中优化加载层显示的方法。通过在App.vue中设置全局加载层，并针对Modal弹窗内的请求单独控制加载层显示，解决了Modal层级覆盖导致的加载层遮罩问题。文章详细阐述了如何利用Vuex状态管理和Axios请求拦截来实现这一优化。

需求：在发送请求的时候需要给全局加loading样式，初步实现在App.vue中直接包裹整个router-view，然后监听vuex中的值，值在封装axios的时候，即请求拦截以及响应请求的时候改变

App.vue

    <div id="app">
      <a-spin :spinning="LOADING_PAGE" size="large">
        <router-view />
      </a-spin>
    </div>
  setup() {
    const store = useStore();
    const LOADING_PAGE = computed(() => {
      return store.getters.LOADING_PAGE;
    });
    return { LOADING_PAGE};
  },

request.ts

// 请求拦截
service.interceptors.request.use((config) => {
    store.commit("MDF_LOADING_PAGE", true);
}
// 响应拦截（以及失败也要更改MDF_LOADING_PAGE）
service.interceptors.response.use((response) => {
	store.commit("MDF_LOADING_PAGE", false);
}

问题：如果在Modal中也有table列表请求的时候，Modal的层级可能会覆盖loading
所以我们需要两个loading，分别用在全局和Modal中，然后我们写两个值分别控制这个loading样式，然后在Modal中就不需要全局的loading，我们在request.ts更改一下即可

// 请求拦截
service.interceptors.request.use((config) => {
   if (!store.getters.LOADING_MODAL) {
    store.commit("MDF_LOADING_PAGE", true);
  }
}
// 响应拦截（以及失败也要更改MDF_LOADING_PAGE）
service.interceptors.response.use((response) => {
	store.commit("MDF_LOADING_PAGE", false);
	store.commit("MDF_LOADING_MODAL", false);
}

Modal页面

  <a-spin :spinning="LOADING_MODAL" size="large">
	...
  </a-spin>
  setup() {
    const store = useStore();
    const LOADING_MODAL= computed(() => {
      return store.getters.LOADING_MODAL;
    });
    return { LOADING_MODAL};
  },