element-ui_NavMenu-典型导航菜单

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        // 后端项目