Files
certd/packages/ui/certd-client/src/vben/utils/helpers/unmount-global-loading.ts
T

30 lines
1.2 KiB
TypeScript
Raw Normal View History

/**
* 移除并销毁loading
* 放在这里是而不是放在 index.html 的app标签内,是因为这样比较不会生硬,渲染过快可能会有闪烁
* 通过先添加css动画隐藏,在动画结束后在移除loading节点来改善体验
* 不好的地方是会增加一些代码量
* 自定义loading可以见:https://doc.vben.pro/guide/in-depth/loading.html
*/
export function unmountGlobalLoading() {
// 查找全局 loading 元素
2025-06-29 14:09:09 +08:00
const loadingElement = document.querySelector("#__app-loading__");
if (loadingElement) {
// 添加隐藏类,触发过渡动画
2025-06-29 14:09:09 +08:00
loadingElement.classList.add("hidden");
// 查找所有需要移除的注入 loading 元素
2025-06-29 14:09:09 +08:00
const injectLoadingElements = document.querySelectorAll('[data-app-loading^="inject"]');
// 当过渡动画结束时,移除 loading 元素和所有注入的 loading 元素
loadingElement.addEventListener(
2025-06-29 14:09:09 +08:00
"transitionend",
() => {
loadingElement.remove(); // 移除 loading 元素
2025-06-29 14:09:09 +08:00
injectLoadingElements.forEach(el => el.remove()); // 移除所有注入的 loading 元素
},
2025-06-29 14:09:09 +08:00
{ once: true }
); // 确保事件只触发一次
}
}