diff --git a/src/views/LayoutView.vue b/src/views/LayoutView.vue index d90f84f..d15fc2e 100644 --- a/src/views/LayoutView.vue +++ b/src/views/LayoutView.vue @@ -26,6 +26,15 @@ + + @@ -121,10 +130,9 @@ { router.push('/login') // 跳转到登录页面 } +/** + * 切换全屏功能 + * 控制应用在全屏和非全屏状态之间切换 + */ +const toggleFullScreen = () => { + // 如果当前是全屏状态,则退出全屏 + if (isFullScreen.value) { + if (document.exitFullscreen) { + document.exitFullscreen() + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen() + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen() + } else if (document.msExitFullscreen) { + document.msExitFullscreen() + } + } + // 如果当前是非全屏状态,则进入全屏 + else { + const docEl = document.documentElement + if (docEl.requestFullscreen) { + docEl.requestFullscreen() + } else if (docEl.mozRequestFullScreen) { + docEl.mozRequestFullScreen() + } else if (docEl.webkitRequestFullscreen) { + docEl.webkitRequestFullscreen() + } else if (docEl.msRequestFullscreen) { + docEl.msRequestFullscreen() + } + } +} + +/** + * 处理全屏变化事件 + * 更新isFullScreen状态 + */ +const handleFullScreenChange = () => { + isFullScreen.value = !!(document.fullscreenElement || + document.mozFullScreenElement || + document.webkitFullscreenElement || + document.msFullscreenElement) +} + /** * 组件生命周期钩子:挂载时执行 - * 初始化用户信息和菜单列表 + * 初始化用户信息、菜单列表并添加全屏事件监听 */ onMounted(() => { // 初始化用户信息 @@ -303,6 +360,24 @@ onMounted(() => { menuList.value = userStore.menuList // 更新菜单列表 } }) + + // 添加全屏变化事件监听 + document.addEventListener('fullscreenchange', handleFullScreenChange) + document.addEventListener('webkitfullscreenchange', handleFullScreenChange) + document.addEventListener('mozfullscreenchange', handleFullScreenChange) + document.addEventListener('MSFullscreenChange', handleFullScreenChange) +}) + +/** + * 组件生命周期钩子:卸载时执行 + * 移除全屏事件监听 + */ +onUnmounted(() => { + // 移除全屏变化事件监听 + document.removeEventListener('fullscreenchange', handleFullScreenChange) + document.removeEventListener('webkitfullscreenchange', handleFullScreenChange) + document.removeEventListener('mozfullscreenchange', handleFullScreenChange) + document.removeEventListener('MSFullscreenChange', handleFullScreenChange) })