element-ui_NavMenu-典型导航菜单
目录
文章目录
内容
1、效果展示
通过点击三根白色竖线对应的区域,实现导航菜单的展开和折叠
-
展开示例效果0-1:
-
折叠示例效果0-2:
2、element-ui 导航菜单组件
-
通用插槽
<template slot="title"> <i class="el-icon-user-solid"></i> <span>会员管理</span> </template>
-
i标签:图标,class指定图标名称,具体参考官网
- 位置:放置在span标签前,图标出现在文字前;放置在span标签后,出现在文字后
-
span标签内文字:显示在菜单项中的文字
-
2.1、el-menu 菜单
- 常用属性详解
属性名 | 类型 | 可接受值 | 默认 | 描述 |
---|---|---|---|---|
background-color | string | - | #ffffff白色 | 背景色 |
text-color | string | - | #303133 | 文本颜色 |
default-active | string | - | - | 默认激活的菜单项,一般设置为子菜单 |
active-text-color | string | - | #409EFF | 激活的菜单项字体颜色 |
unique-opened | boolean | true/false | false | 是否只展开一个菜单及其子菜单项,即不同时展开多个菜单项(一级菜单) |
collapse | boolean | true/false | false | 是否折叠 |
collapse-transition | boolean | true/false | false | 是否显示折叠动画 |
router | boolean | true/false | false | 是否激活vue-router模式 |
2.2、el-submenu 子菜单
属性名 | 类型 | 可接受值 | 默认 | 描述 |
---|---|---|---|---|
index | string | - | - | 菜单项唯一标志,配合router属性使用 |
2.3、el-menu-item 菜单项
属性名 | 类型 | 可接受值 | 默认 | 描述 |
---|---|---|---|---|
index | string | - | - | 菜单项唯一标志,配合router属性使用 |
3、实现
-
template代码:
<div class="btn-toggle" @click="toggleCollapse">|||</div> <el-menu background-color="#333744" text-color="#fff" default-active="/report" active-text-color="#ffd04b" unique-opened :collapse="isCollapse" :collapse-transition="false" router > <el-submenu index="/index"> <template slot="title"> <i class="el-icon-s-home"></i> <span>首页</span> </template> <el-menu-item index="/report"> <template slot="title"> <i class="el-icon-menu"></i> <span>报表</span> </template> </el-menu-item> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-s-grid"></i> <span>商品管理</span> </template> <el-menu-item index="/category"> <template slot="title"> <i class="el-icon-menu"></i> <span>分类管理</span> </template> </el-menu-item> <el-menu-item index="/brand"> <template slot="title"> <i class="el-icon-menu"></i> <span>品牌管理</span> </template> </el-menu-item> <el-menu-item index="/goodsList"> <template slot="title"> <i class="el-icon-menu"></i> <span>商品列表</span> </template> </el-menu-item> <el-menu-item index="/specification"> <template slot="title"> <i class="el-icon-menu"></i> <span>规格参数</span> </template> </el-menu-item> </el-submenu> <el-submenu index="/user"> <template slot="title"> <i class="el-icon-user-solid"></i> <span>会员管理</span> </template> <el-menu-item index="/userList"> <template slot="title"> <i class="el-icon-menu"></i> <span>会员管理</span> </template> </el-menu-item> </el-submenu> <el-submenu index="/sale"> <template slot="title"> <i class="el-icon-money"></i> <span>销售管理</span> </template> <el-menu-item index="/order"> <template slot="title"> <i class="el-icon-menu"></i> <span>订单管理</span> </template> </el-menu-item> </el-submenu> <el-submenu index="/authority"> <template slot="title"> <i class="el-icon-s-tools"></i> <span>权限管理</span> </template> <el-menu-item index="/role"> <template slot="title"> <i class="el-icon-menu"></i> <span>角色管理</span> </template> </el-menu-item> </el-submenu> </el-menu>
-
script代码
... data() { return { isCollapse: false } } ... methods: { ... toggleCollapse() { this.isCollapse = !this.isCollapse } ... }
提示 :首页完整代码在博文’全栈项目-乐优商场-主页布局’中,后续菜单项会从数据库获取,实现菜单项的动态更新。
后记 :
本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785
前端项目源代码地址:https://gitee.com/gaogzhen/ly-bms // 前端后台管理系统
后端JAVA源代码地址:https://gitee.com/gaogzhen/ly-backend // 后端项目