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)
})