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

侧栏

垂直菜单，可内嵌子菜单。

通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。

 1 <el-row class="tac">
 2   <el-col :span="12">
 3     <h5>默认颜色</h5>
 4     <el-menu
 5       default-active="2"
 6       class="el-menu-vertical-demo"
 7       @open="handleOpen"
 8       @close="handleClose">
 9       <el-submenu index="1">
10         <template slot="title">
11           <i class="el-icon-location"></i>
12           <span>导航一</span>
13         </template>
14         <el-menu-item-group>
15           <template slot="title">分组一</template>
16           <el-menu-item index="1-1">选项1</el-menu-item>
17           <el-menu-item index="1-2">选项2</el-menu-item>
18         </el-menu-item-group>
19         <el-menu-item-group title="分组2">
20           <el-menu-item index="1-3">选项3</el-menu-item>
21         </el-menu-item-group>
22         <el-submenu index="1-4">
23           <template slot="title">选项4</template>
24           <el-menu-item index="1-4-1">选项1</el-menu-item>
25         </el-submenu>
26       </el-submenu>
27       <el-menu-item index="2">
28         <i class="el-icon-menu"></i>
29         <span slot="title">导航二</span>
30       </el-menu-item>
31       <el-menu-item index="3" disabled>
32         <i class="el-icon-document"></i>
33         <span slot="title">导航三</span>
34       </el-menu-item>
35       <el-menu-item index="4">
36         <i class="el-icon-setting"></i>
37         <span slot="title">导航四</span>
38       </el-menu-item>
39     </el-menu>
40   </el-col>
41   <el-col :span="12">
42     <h5>自定义颜色</h5>
43     <el-menu
44       default-active="2"
45       class="el-menu-vertical-demo"
46       @open="handleOpen"
47       @close="handleClose"
48       background-color="#545c64"
49       text-color="#fff"
50       active-text-color="#ffd04b">
51       <el-submenu index="1">
52         <template slot="title">
53           <i class="el-icon-location"></i>
54           <span>导航一</span>
55         </template>
56         <el-menu-item-group>
57           <template slot="title">分组一</template>
58           <el-menu-item index="1-1">选项1</el-menu-item>
59           <el-menu-item index="1-2">选项2</el-menu-item>
60         </el-menu-item-group>
61         <el-menu-item-group title="分组2">
62           <el-menu-item index="1-3">选项3</el-menu-item>
63         </el-menu-item-group>
64         <el-submenu index="1-4">
65           <template slot="title">选项4</template>
66           <el-menu-item index="1-4-1">选项1</el-menu-item>
67         </el-submenu>
68       </el-submenu>
69       <el-menu-item index="2">
70         <i class="el-icon-menu"></i>
71         <span slot="title">导航二</span>
72       </el-menu-item>
73       <el-menu-item index="3" disabled>
74         <i class="el-icon-document"></i>
75         <span slot="title">导航三</span>
76       </el-menu-item>
77       <el-menu-item index="4">
78         <i class="el-icon-setting"></i>
79         <span slot="title">导航四</span>
80       </el-menu-item>
81     </el-menu>
82   </el-col>
83 </el-row>
84 
85 <script>
86   export default {
87     methods: {
88       handleOpen(key, keyPath) {
89         console.log(key, keyPath);
90       },
91       handleClose(key, keyPath) {
92         console.log(key, keyPath);
93       }
94     }
95   }
96 </script>

View Code

折叠

 1 <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
 2   <el-radio-button :label="false">展开</el-radio-button>
 3   <el-radio-button :label="true">收起</el-radio-button>
 4 </el-radio-group>
 5 <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
 6   <el-submenu index="1">
 7     <template slot="title">
 8       <i class="el-icon-location"></i>
 9       <span slot="title">导航一</span>
10     </template>
11     <el-menu-item-group>
12       <span slot="title">分组一</span>
13       <el-menu-item index="1-1">选项1</el-menu-item>
14       <el-menu-item index="1-2">选项2</el-menu-item>
15     </el-menu-item-group>
16     <el-menu-item-group title="分组2">
17       <el-menu-item index="1-3">选项3</el-menu-item>
18     </el-menu-item-group>
19     <el-submenu index="1-4">
20       <span slot="title">选项4</span>
21       <el-menu-item index="1-4-1">选项1</el-menu-item>
22     </el-submenu>
23   </el-submenu>
24   <el-menu-item index="2">
25     <i class="el-icon-menu"></i>
26     <span slot="title">导航二</span>
27   </el-menu-item>
28   <el-menu-item index="3" disabled>
29     <i class="el-icon-document"></i>
30     <span slot="title">导航三</span>
31   </el-menu-item>
32   <el-menu-item index="4">
33     <i class="el-icon-setting"></i>
34     <span slot="title">导航四</span>
35   </el-menu-item>
36 </el-menu>
37 
38 <style>
39   .el-menu-vertical-demo:not(.el-menu--collapse) {
40     width: 200px;
41     min-height: 400px;
42   }
43 </style>
44 
45 <script>
46   export default {
47     data() {
48       return {
49         isCollapse: true
50       };
51     },
52     methods: {
53       handleOpen(key, keyPath) {
54         console.log(key, keyPath);
55       },
56       handleClose(key, keyPath) {
57         console.log(key, keyPath);
58       }
59     }
60   }
61 </script>

View Code

参数	说明	类型	可选值	默认值
mode	模式	string	horizontal / vertical	vertical
collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）	boolean	—	false
background-color	菜单的背景色（仅支持 hex 格式）	string	—	#ffffff
text-color	菜单的文字颜色（仅支持 hex 格式）	string	—	#303133
active-text-color	当前激活菜单的文字颜色（仅支持 hex 格式）	string	—	#409EFF
default-active	当前激活菜单的 index	string	—	—
default-openeds	当前打开的sub-menu的 key 数组	Array	—	—
unique-opened	是否只保持一个子菜单的展开	boolean	—	false
menu-trigger	子菜单打开的触发方式(只在 mode 为 horizontal 时有效)	string	—	hover
router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	boolean	—	false

事件名称	说明	参数
open	展开指定的 sub-menu	index: 需要打开的 sub-menu 的 index
close	收起指定的 sub-menu	index: 需要收起的 sub-menu 的 index

事件名称	说明	回调参数
select	菜单激活回调	index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
open	sub-menu 展开的回调	index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path
close	sub-menu 收起的回调	index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path

SubMenu Attribute

参数	说明	类型	可选值	默认值
index	唯一标志	string	—	—
popper-class	弹出菜单的自定义类名	string	—	—
show-timeout	展开 sub-menu 的延时	number	—	300
hide-timeout	收起 sub-menu 的延时	number	—	300
disabled	是否禁用	boolean	—	false

参数	说明	类型	可选值	默认值
index	唯一标志	string	—	—
route	Vue Router 路径对象	Object	—	—
disabled	是否禁用	boolean	—	false

参数	说明	类型	可选值	默认值
title	分组标题	string	—	—

posted @ 2018-03-14 07:17 大姐姐小姐姐阅读(16901) 评论(0) 编辑收藏举报

刷新页面返回顶部

小姐姐的前端笔记

NavMenu 导航菜单

顶栏

侧栏

折叠

Menu Attribute

Menu Methods

Menu Events

SubMenu Attribute

Menu-Item Attribute

Menu-Group Attribute

公告