Element NavMenu导航菜单的使用方法
这篇文章主要介绍了Element NavMenu导航菜单的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
组件—导航菜单
顶栏
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <el-menu : default -active= "activeIndex" class= "el-menu-demo" 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-menu-item index= "2-3" >选项3</el-menu-item> <el-submenu index= "2-4" > <template slot= "title" >选项4</template> <el-menu-item index= "2-4-1" >选项1</el-menu-item> <el-menu-item index= "2-4-2" >选项2</el-menu-item> <el-menu-item index= "2-4-3" >选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index= "3" disabled>消息中心</el-menu-item> </el-menu> <div class= "line" ></div> <el-menu : default -active= "activeIndex2" class= "el-menu-demo" mode= "horizontal" @select= "handleSelect" background-color= "#545c64" text-color= "#fff" active-text-color= "#ffd04b" > <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-menu-item index= "2-3" >选项3</el-menu-item> <el-submenu index= "2-4" > <template slot= "title" >选项4</template> <el-menu-item index= "2-4-1" >选项1</el-menu-item> <el-menu-item index= "2-4-2" >选项2</el-menu-item> <el-menu-item index= "2-4-3" >选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index= "3" disabled>消息中心</el-menu-item> </el-menu> <script> export default { data() { return { activeIndex: '1' , activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } } </script> |
侧栏
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <el-row class= "tac" > <el-col :span= "12" > <h5>默认颜色</h5> <el-menu default -active= "2" class= "el-menu-vertical-demo" @open= "handleOpen" @close= "handleClose" > <el-submenu index= "1" > <template slot= "title" > <i class= "el-icon-location" ></i> <span>导航一</span> </template> <el-menu-item-group> <template slot= "title" >分组一</template> <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-menu-item-group title= "分组2" > <el-menu-item index= "1-3" >选项3</el-menu-item> </el-menu-item-group> <el-submenu index= "1-4" > <template slot= "title" >选项4</template> <el-menu-item index= "1-4-1" >选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index= "2" > <i class= "el-icon-menu" ></i> <span slot= "title" >导航二</span> </el-menu-item> <el-menu-item index= "3" disabled> <i class= "el-icon-document" ></i> <span slot= "title" >导航三</span> </el-menu-item> <el-menu-item index= "4" > <i class= "el-icon-setting" ></i> <span slot= "title" >导航四</span> </el-menu-item> </el-menu> </el-col> <el-col :span= "12" > <h5>自定义颜色</h5> <el-menu default -active= "2" class= "el-menu-vertical-demo" @open= "handleOpen" @close= "handleClose" background-color= "#545c64" text-color= "#fff" active-text-color= "#ffd04b" > <el-submenu index= "1" > <template slot= "title" > <i class= "el-icon-location" ></i> <span>导航一</span> </template> <el-menu-item-group> <template slot= "title" >分组一</template> <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-menu-item-group title= "分组2" > <el-menu-item index= "1-3" >选项3</el-menu-item> </el-menu-item-group> <el-submenu index= "1-4" > <template slot= "title" >选项4</template> <el-menu-item index= "1-4-1" >选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index= "2" > <i class= "el-icon-menu" ></i> <span slot= "title" >导航二</span> </el-menu-item> <el-menu-item index= "3" disabled> <i class= "el-icon-document" ></i> <span slot= "title" >导航三</span> </el-menu-item> <el-menu-item index= "4" > <i class= "el-icon-setting" ></i> <span slot= "title" >导航四</span> </el-menu-item> </el-menu> </el-col> </el-row> <script> export default { methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script> |
折叠
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <el-radio-group v-model= "isCollapse" style= "margin-bottom: 20px;" > <el-radio-button :label= "false" >展开</el-radio-button> <el-radio-button :label= "true" >收起</el-radio-button> </el-radio-group> <el-menu default -active= "1-4-1" class= "el-menu-vertical-demo" @open= "handleOpen" @close= "handleClose" :collapse= "isCollapse" > <el-submenu index= "1" > <template slot= "title" > <i class= "el-icon-location" ></i> <span slot= "title" >导航一</span> </template> <el-menu-item-group> <span slot= "title" >分组一</span> <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-menu-item-group title= "分组2" > <el-menu-item index= "1-3" >选项3</el-menu-item> </el-menu-item-group> <el-submenu index= "1-4" > <span slot= "title" >选项4</span> <el-menu-item index= "1-4-1" >选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index= "2" > <i class= "el-icon-menu" ></i> <span slot= "title" >导航二</span> </el-menu-item> <el-menu-item index= "3" disabled> <i class= "el-icon-document" ></i> <span slot= "title" >导航三</span> </el-menu-item> <el-menu-item index= "4" > <i class= "el-icon-setting" ></i> <span slot= "title" >导航四</span> </el-menu-item> </el-menu> <style> .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style> <script> export default { data() { return { isCollapse: true }; }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script> |
Menu Attribute
Menu Methods
Menu Events
SubMenu Attribute
Menu-Item Attribute
Menu-Group Attribute
到此这篇关于Element NavMenu导航菜单的使用方法的文章就介绍到这了