docs: 优化 夜间主题 切换策略
This commit is contained in:
parent
90bb7f7fc5
commit
497e117567
@ -140,8 +140,10 @@
|
|||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a href="javascript:void(0)">
|
<a href="javascript:void(0)">
|
||||||
<lay-switch
|
<lay-switch
|
||||||
v-model="isDark"
|
v-model="theme"
|
||||||
class="switch"
|
class="switch"
|
||||||
|
onswitch-value="dark"
|
||||||
|
unswitch-value="light"
|
||||||
onswitch-color="rgba(255, 255, 255, 0.05)"
|
onswitch-color="rgba(255, 255, 255, 0.05)"
|
||||||
unswitch-color="rgba(255, 255, 255, 0.05)"
|
unswitch-color="rgba(255, 255, 255, 0.05)"
|
||||||
>
|
>
|
||||||
@ -223,7 +225,6 @@ export default {
|
|||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const locale = ref("zh_CN");
|
const locale = ref("zh_CN");
|
||||||
const isDark = ref(false);
|
|
||||||
const locales = [
|
const locales = [
|
||||||
{ name: "zh_CN", locale: zh_CN, merge: true },
|
{ name: "zh_CN", locale: zh_CN, merge: true },
|
||||||
{ name: "en_US", locale: en_US, merge: true },
|
{ name: "en_US", locale: en_US, merge: true },
|
||||||
@ -268,14 +269,6 @@ export default {
|
|||||||
import.meta.env.LAYUI_VUE_VERSION
|
import.meta.env.LAYUI_VUE_VERSION
|
||||||
)
|
)
|
||||||
|
|
||||||
watch(isDark, () => {
|
|
||||||
if (isDark.value) {
|
|
||||||
theme.value = "dark";
|
|
||||||
} else {
|
|
||||||
theme.value = "light";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => route.path,
|
() => route.path,
|
||||||
(val) => {
|
(val) => {
|
||||||
@ -292,7 +285,6 @@ export default {
|
|||||||
locale.value = lang;
|
locale.value = lang;
|
||||||
};
|
};
|
||||||
|
|
||||||
provide("isDark",isDark);
|
|
||||||
provide("theme",theme);
|
provide("theme",theme);
|
||||||
provide('LayuiVueVersion', layuiVueVersion);
|
provide('LayuiVueVersion', layuiVueVersion);
|
||||||
|
|
||||||
@ -301,7 +293,6 @@ export default {
|
|||||||
menus,
|
menus,
|
||||||
theme,
|
theme,
|
||||||
locale,
|
locale,
|
||||||
isDark,
|
|
||||||
locales,
|
locales,
|
||||||
currentPath,
|
currentPath,
|
||||||
handleClick,
|
handleClick,
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
</router-link>
|
</router-link>
|
||||||
<a class="layui-inline site-down" href="javascript:void(0);" @click="changeTheme">
|
<a class="layui-inline site-down" href="javascript:void(0);" @click="changeTheme">
|
||||||
|
|
||||||
{{ isDark ? 'Turn Off' : 'Turn On'}}
|
{{ theme === 'dark' ? 'Turn Off' : 'Turn On'}}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-version">
|
<div class="site-version">
|
||||||
@ -115,11 +115,9 @@ export default {
|
|||||||
setup() {
|
setup() {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const layuiVueVersion = inject('LayuiVueVersion')
|
const layuiVueVersion = inject('LayuiVueVersion')
|
||||||
const isDark = inject("isDark");
|
|
||||||
const theme = inject("theme");
|
const theme = inject("theme");
|
||||||
|
|
||||||
const changeTheme = () => {
|
const changeTheme = () => {
|
||||||
isDark.value = !isDark.value;
|
|
||||||
if(theme.value === 'dark') {
|
if(theme.value === 'dark') {
|
||||||
theme.value = 'light';
|
theme.value = 'light';
|
||||||
} else {
|
} else {
|
||||||
@ -129,7 +127,6 @@ export default {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
t,
|
t,
|
||||||
isDark,
|
|
||||||
theme,
|
theme,
|
||||||
changeTheme,
|
changeTheme,
|
||||||
layuiVueVersion
|
layuiVueVersion
|
||||||
|
Loading…
Reference in New Issue
Block a user