feat: 添加确保渲染完成的函数并优化加载背景移除逻辑

This commit is contained in:
jxxghp
2025-01-26 08:42:09 +08:00
parent a3ecad3436
commit f49cafc0cc
3 changed files with 14 additions and 4 deletions
+7 -2
View File
@@ -10,8 +10,7 @@ export function useDefer(maxFrameCount = 1) {
const refreshFrameCount = () => { const refreshFrameCount = () => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
frameCount.value++ frameCount.value++
if (frameCount.value < maxFrameCount) if (frameCount.value < maxFrameCount) refreshFrameCount()
refreshFrameCount()
}) })
} }
refreshFrameCount() refreshFrameCount()
@@ -19,3 +18,9 @@ export function useDefer(maxFrameCount = 1) {
return frameCount.value >= showInFrameCount return frameCount.value >= showInFrameCount
} }
} }
export function ensureRenderComplete(callback: () => void) {
requestAnimationFrame(() => {
requestAnimationFrame(callback)
})
}
+7
View File
@@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useTheme } from 'vuetify' import { useTheme } from 'vuetify'
import { checkPrefersColorSchemeIsDark } from '@/@core/utils' import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
import { ensureRenderComplete, removeEl } from './@core/utils/dom'
const { global: globalTheme } = useTheme() const { global: globalTheme } = useTheme()
@@ -45,6 +46,12 @@ if (window.Apex) {
onBeforeMount(async () => { onBeforeMount(async () => {
setTheme() setTheme()
}) })
onMounted(() => {
ensureRenderComplete(() => {
nextTick(() => removeEl('#loading-bg'))
});
})
</script> </script>
<template> <template>
-2
View File
@@ -17,7 +17,6 @@ import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
import { CronVuetify } from '@vue-js-cron/vuetify' import { CronVuetify } from '@vue-js-cron/vuetify'
// 4. 工具函数和其他辅助模块 // 4. 工具函数和其他辅助模块
import { removeEl } from './@core/utils/dom'
import { fetchGlobalSettings } from './api' import { fetchGlobalSettings } from './api'
import { isPWA } from './@core/utils/navigator' import { isPWA } from './@core/utils/navigator'
@@ -114,5 +113,4 @@ initializeApp().then(() => {
}, },
}) })
.mount('#app') .mount('#app')
.$nextTick(() => removeEl('#loading-bg'))
}) })