fix: 系统设置主题切换问题修复

This commit is contained in:
郝先瑞
2022-03-01 23:53:30 +08:00
parent a6882db1dd
commit beac9b19b4
4 changed files with 6 additions and 4 deletions

View File

@@ -9,6 +9,7 @@
import {computed, onMounted, ref, watch} from "vue"; import {computed, onMounted, ref, watch} from "vue";
import {useAppStoreHook} from "@/store/modules/app"; import {useAppStoreHook} from "@/store/modules/app";
import {ElConfigProvider} from 'element-plus' import {ElConfigProvider} from 'element-plus'
import {localStorage} from "@/utils/storage";
//官方文档: https://element-plus.gitee.io/zh-CN/guide/i18n.html //官方文档: https://element-plus.gitee.io/zh-CN/guide/i18n.html
@@ -30,7 +31,7 @@ watch(language, (value) => {
immediate: true immediate: true
}) })
onMounted(()=>{ onMounted(()=>{
const style = localStorage.getItem("style"); const style = localStorage.get("style");
document.documentElement.style.cssText = style as string; document.documentElement.style.cssText = style as string;
}) })
</script> </script>

View File

@@ -35,7 +35,6 @@ const theme = computed(() => useSettingStoreHook().theme)
const show = ref(false) const show = ref(false)
watch(show, (value) => { watch(show, (value) => {
console.log('show', value)
if (value) { if (value) {
addEventClick() addEventClick()
} }

View File

@@ -12,6 +12,7 @@ import {computed, nextTick, watch} from "vue";
import {useSettingStoreHook} from "@/store/modules/settings"; import {useSettingStoreHook} from "@/store/modules/settings";
import {useTagsViewStoreHook} from "@/store/modules/tagsView"; import {useTagsViewStoreHook} from "@/store/modules/tagsView";
import {useRoute, useRouter} from "vue-router"; import {useRoute, useRouter} from "vue-router";
import {localStorage} from "@/utils/storage";
// 参考连接:https://juejin.cn/post/7024025899813044232#heading-1 // 参考连接:https://juejin.cn/post/7024025899813044232#heading-1
import {mix} from "@/utils"; import {mix} from "@/utils";
@@ -26,14 +27,14 @@ const theme = computed(() => useSettingStoreHook().theme)
watch(theme, (color: string) => { watch(theme, (color: string) => {
node.style.setProperty("--el-color-primary", color); node.style.setProperty("--el-color-primary", color);
localStorage.setItem("theme", color) localStorage.set("theme", color)
for (let i = 1; i < 10; i += 1) { for (let i = 1; i < 10; i += 1) {
node.style.setProperty(`--el-color-primary-light-${i}`, mix(color, mixWhite, i * 0.1)); node.style.setProperty(`--el-color-primary-light-${i}`, mix(color, mixWhite, i * 0.1));
} }
node.style.setProperty("--el-color-primary-dark", mix(color, mixBlack, 0.1)); node.style.setProperty("--el-color-primary-dark", mix(color, mixBlack, 0.1));
localStorage.setItem("style", node.style.cssText); localStorage.set("style", node.style.cssText);
}) })
</script> </script>

View File

@@ -2,6 +2,7 @@ import {defineStore} from "pinia";
import {store} from "@/store"; import {store} from "@/store";
import {SettingState} from "@/store/interface"; import {SettingState} from "@/store/interface";
import defaultSettings from '../../settings' import defaultSettings from '../../settings'
import {localStorage} from "@/utils/storage";
const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings
import variables from '@/styles/element-variables.module.scss' import variables from '@/styles/element-variables.module.scss'