vue3侧边栏

### Vue3 中实现侧边栏功能 在 Vue3 中实现侧边栏功能可以通过多种方式完成，以下是基于现有引用以及常见实践的方法。 #### 使用第三方库 `vue-sidebar-menu` 或 `Vue-Bar` 可以利用现有的开源组件来快速构建侧边栏。例如： - **`vue-sidebar-menu`**: 这是一个专门为 Vue.js 设计的侧边栏菜单组件[^1]。 安装方法如下： ```bash npm install vue-sidebar-menu ``` 基本使用示例： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import VueSidebarMenu from 'vue-sidebar-menu'; const app = createApp(App); app.use(VueSidebarMenu).mount('#app'); ``` 配置项和样式可以根据官方文档进一步调整。 - **`Vue-Bar`**: 另一种灵活且优雅的选择[^3]。 安装命令： ```bash npm install @j-t-mcc/vue-bar ``` 示例代码： ```html <template> <div id="app"> <vue-bar :data="barData"></vue-bar> </div> </template> <script> import VueBar from '@j-t-mcc/vue-bar'; export default { components: { VueBar }, data() { return { barData: ['Item 1', 'Item 2', 'Item 3'] }; } }; </script> ``` #### 自定义实现侧边栏逻辑 如果希望完全自定义侧边栏的功能和外观，则可以从零开始设计。以下是一些关键点： ##### 动态渲染菜单树结构 通过抽离子组件的方式管理复杂的菜单数据[^2]。假设有一个 JSON 数据源表示菜单结构： ```json [ { "title": "Home", "icon": "home-icon", "link": "/home" }, { "title": "Settings", "icon": "settings-icon", "children": [ { "title": "Profile", "link": "/profile" }, { "title": "Account", "link": "/account" } ] } ] ``` 创建一个名为 `MenuTree.vue` 的组件负责递归渲染上述数据： ```vue <template> <ul class="menu-tree"> <li v-for="(item, index) in menuItems" :key="index"> <a :href="item.link">{{ item.title }}</a> <menu-tree v-if="item.children" :menu-items="item.children"></menu-tree> </li> </ul> </template> <script> export default { name: 'MenuTree', props: { menuItems: { type: Array, required: true } } }; </script> ``` 将其嵌套到主应用中即可动态展示多级菜单。 ##### 添加 Logo 和其他静态内容 为了增强用户体验，在侧边栏顶部放置公司 LOGO 是常见的做法。可以在 `<el-menu>` 组件外部添加额外的 HTML 元素： ```html <div class="sidebar-container"> <p class="logo">Your Company Name</p> <!-- 显示LOGO --> <el-menu router> <menu-tree :menu-items="menuList"></menu-tree> </el-menu> </div> ``` CSS 样式需单独配置以适配布局需求。 --- ### 总结 无论是采用成熟的第三方插件还是自行开发，都可以满足不同场景下的侧边栏需求。对于初学者而言，建议优先尝试已有的解决方案；而对于有特殊定制化要求的应用程序来说，手写逻辑可能更加合适。