elementui nav

ElementUI NavMenu 导航菜单

ElementUI 的 NavMenu 组件提供了一种灵活的方式来实现网站或应用程序的导航菜单。它支持水平、垂直布局，多级菜单以及各种自定义选项。

基本用法

水平导航菜单示例代码：

<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>

垂直导航菜单示例代码：

<el-menu default-active="2" class="el-menu-vertical-demo">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>导航一</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span>导航二</span>
  </el-menu-item>
</el-menu>

常用属性

• mode: 菜单模式，可选值为 horizontal/vertical
• default-active: 当前激活菜单的 index
• background-color: 菜单的背景色
• text-color: 菜单的文字颜色
• active-text-color: 当前激活菜单的文字颜色
• router: 是否使用 vue-router 模式
• collapse: 是否水平折叠收起菜单

事件处理

select 事件在菜单项被选中时触发：

methods: {
  handleSelect(key, keyPath) {
    console.log(key, keyPath);
  }
}

自定义样式

可以通过覆盖 ElementUI 的默认样式类来自定义导航菜单的外观：

.el-menu {
  border-right: none;
}
.el-menu-item {
  font-size: 14px;
}
.el-submenu__title {
  color: #333;
}

响应式设计

结合媒体查询可以实现响应式导航菜单：

@media screen and (max-width: 768px) {
  .el-menu--horizontal {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
  }
}

与 Vue Router 集成

设置 router 属性为 true 可以自动将 index 作为 path 进行路由跳转：

<el-menu :router="true">
  <el-menu-item index="/home">首页</el-menu-item>
  <el-menu-item index="/about">关于</el-menu-item>
</el-menu>