vue3 管理系统侧边导航栏折叠

### Vue3 实现管理系统侧边导航栏折叠功能 在现代Web应用开发中，侧边栏作为导航和功能入口的重要组件，其灵活性和用户体验至关重要[^1]。对于Vue 3的应用程序来说，可以利用组合式API来创建更加简洁明了的逻辑结构。 下面是一个简单的例子展示如何使用Vue 3 和 Element Plus (Element UI 的Vue 3版本) 来实现一个可折叠的侧边导航菜单： #### 组件定义 首先安装`element-plus`库： ```bash npm install element-plus ``` 接着，在单文件组件(SFC) 中编写如下代码: ```vue <template> <el-container style="height: 100%;"> <!-- 左侧菜单 --> <el-aside :width="isCollapse ? '64px' : '200px'" class="side-bar"> <div @click="toggleCollapse" class="logo">LOGO</div> <el-menu default-active="2" class="menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" router > <el-sub-menu index="1"> <template #title> <i class="el-icon-location"></i> <span>Navigator One</span> </template> <el-menu-item-group title="Group One"> <el-menu-item index="/pageA">Page A</el-menu-item> <el-menu-item index="/pageB">Page B</el-menu-item> </el-menu-item-group> </el-sub-menu> <el-menu-item index="/"> <i class="el-icon-menu"></i> <template #title>Dashboard</template> </el-menu-item> </el-menu> </el-aside> <!-- 主体内容区 --> <el-container> <el-header style="text-align: right; font-size: 12px;"> Header Area </el-header> <el-main>Main Content Here</el-main> </el-container> </el-container> </template> <script setup lang="ts"> import { ref } from "vue"; const isCollapse = ref(false); function toggleCollapse() { isCollapse.value = !isCollapse.value; } </script> <style scoped> .side-bar .logo { height: 60px; line-height: 60px; text-align: center; color: white; cursor: pointer; } .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style> ``` 此示例通过监听点击事件改变 `isCollapse` 变量的状态从而控制左侧菜单宽度的变化以及内部文字显示与否的行为。当用户点击顶部Logo区域时触发切换操作。 为了使布局更美观和谐，还可以调整样式表中的CSS属性以适应不同的需求。