NavMenu 导航菜单

顶栏

适用广泛的基础用法。

导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

 1 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
 2   <el-menu-item index="1">处理中心</el-menu-item>
 3   <el-submenu index="2">
 4     <template slot="title">我的工作台</template>
 5     <el-menu-item index="2-1">选项1</el-menu-item>
 6     <el-menu-item index="2-2">选项2</el-menu-item>
 7     <el-menu-item index="2-3">选项3</el-menu-item>
 8     <el-submenu index="2-4">
 9       <template slot="title">选项4</template>
10       <el-menu-item index="2-4-1">选项1</el-menu-item>
11       <el-menu-item index="2-4-2">选项2</el-menu-item>
12       <el-menu-item index="2-4-3">选项3</el-menu-item>
13     </el-submenu>
14   </el-submenu>
15   <el-menu-item index="3" disabled>消息中心</el-menu-item>
16   <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
17 </el-menu>
18 <div class="line"></div>
19 <el-menu
20   :default-active="activeIndex2"
21   class="el-menu-demo"
22   mode="horizontal"
23   @select="handleSelect"
24   background-color="#545c64"
25   text-color="#fff"
26   active-text-color="#ffd04b">
27   <el-menu-item index="1">处理中心</el-menu-item>
28   <el-submenu index="2">
29     <template slot="title">我的工作台</template>
30     <el-menu-item index="2-1">选项1</el-menu-item>
31     <el-menu-item index="2-2">选项2</el-menu-item>
32     <el-menu-item index="2-3">选项3</el-menu-item>
33     <el-submenu index="2-4">
34       <template slot="title">选项4</template>
35       <el-menu-item index="2-4-1">选项1</el-menu-item>
36       <el-menu-item index="2-4-2">选项2</el-menu-item>
37       <el-menu-item index="2-4-3">选项3</el-menu-item>
38     </el-submenu>
39   </el-submenu>
40   <el-menu-item index="3" disabled>消息中心</el-menu-item>
41   <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
42 </el-menu>
43 
44 <script>
45   export default {
46     data() {
47       return {
48         activeIndex: '1',
49         activeIndex2: '1'
50       };
51     },
52     methods: {
53       handleSelect(key, keyPath) {
54         console.log(key, keyPath);
55       }
56     }
57   }
58 </script>

View Code