elementiui 顶部导航栏

### 关于 Element UI 顶部导航栏的实现方式 在实际开发中，Element UI 提供了 `el-menu` 和相关组件来创建导航栏。通过配置属性和嵌套结构，可以轻松实现顶部导航栏的功能[^1]。 以下是基于 Element UI 的顶部导航栏实现方法： #### 1. 导航栏基本结构 使用 `el-menu` 组件作为主要容器，并设置其模式为水平方向 (`mode="horizontal"`)。这样可以让菜单项横向排列。 ```html <template> <div id="app"> <!-- 顶部导航 --> <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">首页</el-menu-item> <el-submenu index="2"> <template slot="title">服务</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-submenu> <el-menu-item index="3">关于我们</el-menu-item> </el-menu> </div> </template> ``` #### 2. 配置默认激活状态 通过绑定 `:default-active` 属性到当前选中的索引值，可以控制哪个菜单项被高亮显示。 ```javascript <script> export default { data() { return { activeIndex: '1' // 默认激活的第一个菜单项 }; }, methods: { handleSelect(key, keyPath) { console.log('Selected menu:', key, keyPath); } } }; </script> ``` #### 3. 自定义样式 可以通过覆盖默认 CSS 或者利用内置类名来自定义顶部导航栏的外观。例如修改背景颜色、字体大小等。 ```css <style scoped> /* 修改整个菜单的颜色 */ .el-menu.horizontal { background-color: #409EFF; } /* 修改菜单文字颜色 */ .el-menu--horizontal .el-menu-item, .el-menu--horizontal .el-submenu__title { color: white !important; } </style> ``` #### 4. 添加响应式支持 为了使顶部导航栏适应不同设备宽度，可结合栅格系统或者媒体查询完成布局调整[^2]。 --- ### 完整示例代码 以下是一个完整的顶部导航栏实现案例： ```html <template> <div id="app"> <el-menu class="top-nav" :default-active="activeIndex" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">首页</el-menu-item> <el-submenu index="2"> <template slot="title">产品</template> <el-menu-item index="2-1">功能介绍</el-menu-item> <el-menu-item index="2-2">价格表</el-menu-item> </el-submenu> <el-menu-item index="3">联系我们</el-menu-item> <!-- 右侧按钮 --> <div style="float:right;"> <el-button type="text" icon="el-icon-user-solid">登录</el-button> <el-button type="primary">注册</el-button> </div> </el-menu> </div> </template> <script> export default { data() { return { activeIndex: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(`Menu selected: ${key}, Path:`, keyPath); } } }; </script> <style scoped> .top-nav { border-bottom: none; /* 移除底部边框线 */ padding-right: 20px; /* 调整右侧间距 */ } .top-nav .el-menu-item.is-active { font-weight: bold; } .top-nav .el-button { margin-top: 8px; /* 对齐垂直位置 */ } </style> ``` --- ### 总结 以上展示了如何使用 Element UI 创建一个简单的顶部导航栏，包括基础配置、事件处理以及样式的自定义。如果需要更复杂的交互逻辑，还可以引入 Vuex 来管理全局状态，从而动态更新导航条目或用户信息[^1]。