- 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。另外,在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
1 <el-menu
2 :default-active="activeIndex"
3 class="el-menu-demo"
4 mode="horizontal" @select="handleSelect"
5 background-color="#545c64"
6 text-color="#fff"
7 active-text-color="red">
8 </el-menu>
.el-menu--horizontal > .el-menu-item {
50%;
border-bottom: none;
height: 1rem;
line-height: 0.5rem;
text-align: center;
}
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: none;
}