1. 项目背景与需求分析最近在做一个数据可视化大屏项目时遇到了一个典型的需求场景需要在若依Vue3框架的Web应用中嵌入一个全屏展示的数据大屏页面。这个页面需要完全占据浏览器视口不显示任何干扰元素。但问题来了 - 若依框架默认会显示左侧导航栏和顶部导航栏这两个组件会占用宝贵的屏幕空间影响大屏展示效果。这让我想起去年做的一个智慧园区项目当时也需要在管理后台中嵌入监控大屏。最初尝试用CSS暴力隐藏结果发现路由切换时导航栏又会自动出现。后来才明白这种临时性的UI控制应该通过框架提供的状态管理机制来实现而不是直接操作DOM。2. 技术方案选型2.1 状态管理方案对比在Vue3生态中我们有两个主流的状态管理选择PiniaVue官方推荐的新一代状态管理库API简洁TypeScript支持好Vuex传统的状态管理方案生态成熟但稍显繁琐实测下来若依Vue3默认集成了Pinia所以我们优先采用Pinia方案。这里有个小技巧通过Chrome的Vue开发者工具可以快速查看当前应用使用的状态管理库。2.2 组件通信方式选择控制导航栏显隐本质上是一个跨组件通信问题。经过对比测试我们确定了三种可行方案方案A通过Pinia全局状态管理推荐方案B使用provide/inject实现组件穿透方案C利用事件总线eventBus考虑到代码的可维护性和可扩展性最终选择了方案A。这里有个坑要注意直接修改状态而不通过action可能会导致DevTools的时间旅行功能失效。3. 具体实现步骤3.1 状态仓库改造首先我们需要扩展若依默认的app store。找到src/store/modules/app.js文件添加顶部导航栏的控制状态const useAppStore defineStore(app, { state: () ({ sidebar: { opened: true, withoutAnimation: false, hide: false }, // 新增顶部导航栏状态 topbar: { hide: false }, device: desktop }), actions: { // 已有侧边栏切换方法 toggleSideBarHide(hide) { this.sidebar.hide hide }, // 新增顶部导航栏切换方法 toggleTopBarHide(hide) { this.topbar.hide hide } } })3.2 布局组件调整接下来修改布局组件src/layout/index.vue这里需要做两处关键改动根据状态控制顶部导航栏的渲染确保全屏模式下页面布局正确template div classapp-wrapper !-- 顶部导航栏条件渲染 -- navbar v-if!appStore.topbar.hide / !-- 侧边栏条件渲染 -- sidebar v-if!appStore.sidebar.hide classsidebar-container / app-main / /div /template script setup import { useAppStore } from /store/modules/app const appStore useAppStore() /script3.3 全屏切换逻辑封装为了便于复用我们可以封装一个全屏切换的composable// src/composables/useFullscreen.js import { useAppStore } from /store/modules/app export function useFullscreen() { const appStore useAppStore() const enterFullscreen () { appStore.toggleSideBarHide(true) appStore.toggleTopBarHide(true) document.documentElement.classList.add(fullscreen-mode) } const exitFullscreen () { appStore.toggleSideBarHide(false) appStore.toggleTopBarHide(false) document.documentElement.classList.remove(fullscreen-mode) } return { enterFullscreen, exitFullscreen } }4. 实际应用示例4.1 大屏页面集成现在我们可以轻松地在任意页面控制导航栏的显隐了。以下是大屏页面的典型实现template div classdata-screen !-- 大屏内容 -- button clicktoggleFullscreen {{ isFullscreen ? 退出全屏 : 进入全屏 }} /button /div /template script setup import { ref } from vue import { useFullscreen } from /composables/useFullscreen const { enterFullscreen, exitFullscreen } useFullscreen() const isFullscreen ref(false) const toggleFullscreen () { if (isFullscreen.value) { exitFullscreen() } else { enterFullscreen() } isFullscreen.value !isFullscreen.value } /script4.2 样式调整技巧为了确保全屏模式下的显示效果还需要添加一些CSS样式/* src/styles/fullscreen.css */ .fullscreen-mode { .app-main { padding: 0 !important; height: 100vh !important; } .data-screen { width: 100%; height: 100%; overflow: hidden; } }5. 常见问题与解决方案5.1 路由切换状态保持有开发者反馈在路由切换时导航栏会重新出现。这是因为若依的路由守卫会重置部分状态。解决方案是在路由meta中添加标记// router/index.js { path: /data-screen, component: () import(/views/data-screen/index), meta: { requiresAuth: true, keepHidden: true // 新增标记 } }然后在路由守卫中做相应处理router.beforeEach((to, from, next) { const appStore useAppStore() if (to.meta.keepHidden) { appStore.toggleSideBarHide(true) appStore.toggleTopBarHide(true) } next() })5.2 响应式布局适配在全屏模式下我们还需要考虑移动端适配问题。可以通过监听device状态来调整// 在useFullscreen.js中补充 watch(() appStore.device, (newVal) { if (newVal mobile) { exitFullscreen() } })6. 进阶优化建议6.1 动画过渡效果直接隐藏/显示导航栏可能会显得突兀可以添加平滑的过渡动画template transition nameslide-fade navbar v-if!appStore.topbar.hide / /transition /template style .slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.3s ease; } .slide-fade-enter-from, .slide-fade-leave-to { opacity: 0; transform: translateY(-20px); } /style6.2 本地存储持久化如果需要记住用户的全屏偏好可以结合localStorage// 在useFullscreen.js中 const enterFullscreen () { // ...原有逻辑 localStorage.setItem(fullscreen, true) } const exitFullscreen () { // ...原有逻辑 localStorage.removeItem(fullscreen) } // 初始化时检查 if (localStorage.getItem(fullscreen)) { enterFullscreen() }7. 项目实践心得在实际项目中实现这个功能时我走过一些弯路。最初尝试直接修改DOM样式结果发现路由切换时状态无法保持。后来改用CSS类名控制又遇到了z-index层级问题。最终通过状态管理方案才完美解决。一个特别容易忽略的点是在全屏模式下浏览器的默认快捷键如F11可能会与我们的全屏功能冲突。建议在文档中添加说明或者禁用浏览器的原生全屏行为。另一个实用技巧是可以在全屏模式下添加一个悬浮的退出按钮位置可以固定在右下角透明度设为0.5这样既不影响大屏展示又方便用户操作。这个按钮可以通过CSS的position: fixed定位确保在任何滚动位置都可见。