attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全屏

Browse Source
This commit is contained in:
wang_fan_w 2024-05-03 16:00:59 +08:00
parent bc06b49a09
commit c16c138c97
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lang/modules/enUS.ts
View File

@ -32,6 +32,7 @@ export default {
["switch-to-night-mode"]: "switch to night mode", ["switch-to-night-mode"]: "switch to night mode",
["switch-to-daytime-mode"]: "switch to daytime mode", ["switch-to-daytime-mode"]: "switch to daytime mode",
["full-screen"]: "full screen", ["full-screen"]: "full screen",
["exit-full-screen"]: "exit full screen",
["system-settings"]: "system settings", ["system-settings"]: "system settings",
["theme-settings"]: "theme settings", ["theme-settings"]: "theme settings",
["personal-information"]: "personal information", ["personal-information"]: "personal information",

1
src/lang/modules/zhCN.ts
View File

@ -32,6 +32,7 @@ export default {
["switch-to-night-mode"]: "切换黑夜模式", ["switch-to-night-mode"]: "切换黑夜模式",
["switch-to-daytime-mode"]: "切换白天模式", ["switch-to-daytime-mode"]: "切换白天模式",
["full-screen"]: "全屏", ["full-screen"]: "全屏",
["exit-full-screen"]: "退出全屏",
["system-settings"]: "系统设置", ["system-settings"]: "系统设置",
["theme-settings"]: "主题设置", ["theme-settings"]: "主题设置",
["personal-information"]: "个人信息", ["personal-information"]: "个人信息",

22
src/layout/components/Header/index.vue
View File

@ -45,10 +45,11 @@
<template #content><Notice /></template> <template #content><Notice /></template>
</a-popover> </a-popover>
<!-- 全屏 --> <!-- 全屏 -->
<a-tooltip :content="$t(`language.full-screen`)"> <a-tooltip :content="$t(`language.${fullScreen ? 'full-screen' : 'exit-full-screen'}`)">
<a-button size="mini" type="text" class="icon_btn"> <a-button size="mini" type="text" class="icon_btn" @click="onFullScreen">
<template #icon> <template #icon>
<icon-fullscreen :size="18" /> <icon-fullscreen :size="18" v-if="fullScreen" />
<icon-fullscreen-exit :size="18" v-else />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -127,10 +128,25 @@ const router = useRouter();
const themeStore = useThemeConfig(); const themeStore = useThemeConfig();
const { collapsed, language, darkMode } = storeToRefs(themeStore); const { collapsed, language, darkMode } = storeToRefs(themeStore);
// 折叠
const onCollapsed = () => { const onCollapsed = () => {
themeStore.setCollapsed(!collapsed.value); themeStore.setCollapsed(!collapsed.value);
}; };
// 全屏
const fullScreen = ref(true);
const onFullScreen = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
fullScreen.value = false;
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
fullScreen.value = true;
}
}
};
// 黑暗模式 // 黑暗模式
const onNightMode = () => { const onNightMode = () => {
darkMode.value = !darkMode.value; darkMode.value = !darkMode.value;