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