当前位置：首页 > news >正文

若依Vue3项目实战：动态控制Web端侧边栏与顶部导航栏的显隐方案

news 2026/5/12 19:30:07

1. 项目背景与需求分析

最近在做一个数据可视化大屏项目时，遇到了一个典型的需求场景：需要在若依Vue3框架的Web应用中嵌入一个全屏展示的数据大屏页面。这个页面需要完全占据浏览器视口，不显示任何干扰元素。但问题来了 - 若依框架默认会显示左侧导航栏和顶部导航栏，这两个组件会占用宝贵的屏幕空间，影响大屏展示效果。

这让我想起去年做的一个智慧园区项目，当时也需要在管理后台中嵌入监控大屏。最初尝试用CSS暴力隐藏，结果发现路由切换时导航栏又会自动出现。后来才明白，这种临时性的UI控制应该通过框架提供的状态管理机制来实现，而不是直接操作DOM。

2. 技术方案选型

2.1 状态管理方案对比

在Vue3生态中，我们有两个主流的状态管理选择：

Pinia：Vue官方推荐的新一代状态管理库，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 class="app-wrapper"> <!-- 顶部导航栏条件渲染 --> <navbar v-if="!appStore.topbar.hide" /> <!-- 侧边栏条件渲染 --> <sidebar v-if="!appStore.sidebar.hide" class="sidebar-container" /> <app-main /> </div> </template> <script setup> import { useAppStore } from '@/store/modules/app' const appStore = useAppStore() </script>

3.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 class="data-screen"> <!-- 大屏内容 --> <button @click="toggleFullscreen"> {{ 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 } </script>

4.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 name="slide-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); } </style>

6.2 本地存储持久化

如果需要记住用户的全屏偏好，可以结合localStorage：

// 在useFullscreen.js中 const enterFullscreen = () => { // ...原有逻辑 localStorage.setItem('fullscreen', 'true') } const exitFullscreen = () => { // ...原有逻辑 localStorage.removeItem('fullscreen') } // 初始化时检查 if (localStorage.getItem('fullscreen')) { enterFullscreen() }