perf: 主题初始化放在 onBeforeMount 避免初始化页面闪烁

This commit is contained in:
xiaoxian521 2022-12-04 14:42:12 +08:00
parent fa5c97ffa4
commit 9ab3fd19ef

View File

@ -1,4 +1,13 @@
<script setup lang="ts">
import {
ref,
unref,
watch,
reactive,
computed,
nextTick,
onBeforeMount
} from "vue";
import {
useDark,
debounce,
@ -17,7 +26,6 @@ import { useNav } from "@/layout/hooks/useNav";
import { useAppStoreHook } from "@/store/modules/app";
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { ref, unref, watch, reactive, computed, nextTick } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import dayIcon from "@/assets/svg/day.svg?component";
@ -189,16 +197,6 @@ function setLayoutModel(layout: string) {
useAppStoreHook().setLayout(layout);
}
/* 初始化项目配置 */
nextTick(() => {
settings.greyVal &&
document.querySelector("html")?.setAttribute("class", "html-grey");
settings.weakVal &&
document.querySelector("html")?.setAttribute("class", "html-weakness");
settings.tabsVal && tagsChange();
dataThemeChange();
});
watch($storage, ({ layout }) => {
switch (layout["layout"]) {
case "vertical":
@ -218,6 +216,18 @@ watch($storage, ({ layout }) => {
break;
}
});
onBeforeMount(() => {
dataThemeChange();
/* 初始化项目配置 */
nextTick(() => {
settings.greyVal &&
document.querySelector("html")?.setAttribute("class", "html-grey");
settings.weakVal &&
document.querySelector("html")?.setAttribute("class", "html-weakness");
settings.tabsVal && tagsChange();
});
});
</script>
<template>