zoukankan      html  css  js  c++  java

  • 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
    参数说明类型可选值默认值
    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 — —
  • 相关阅读:
    matlab2016b -ubuntu 1604 -install- and -trouble -shooting--finally-all is ok!!
    cvpr2017-code-etc
    汇率换算自然语言理解功能JAVA DEMO
    聚焦新相亲时代:女孩在京有五六套房哭着想嫁富2代
    cvpr2017年的所有论文下载
    公司危机、下岗困局、不受重视，程序员该如何面对职场挫折？
    利用CH341A编程器刷新BIOS，恢复BIOS，妈妈再也不用担心BIOS刷坏了
    垃圾人定律和垃圾人生存方式定律
    90后女孩的杀身之祸----悲剧酿成--放弃所有的虚构的故事后，你终会发现，真实平淡的现实才是最美好的。
    仓央嘉措比较著名的诗
  • 原文地址：https://www.cnblogs.com/grt322/p/8564442.html
Copyright © 2011-2022 走看看