折叠导航菜单

Author: taylorchen709

src/main.js

@@ -2,8 +2,8 @@ import babelpolyfill from 'babel-polyfill'
 import Vue from 'vue'
 import App from './App'
 import ElementUI from 'element-ui'
-//import 'element-ui/lib/theme-default/index.css'
-import './assets/theme/theme-green/index.css'
+import 'element-ui/lib/theme-default/index.css'
+//import './assets/theme/theme-green/index.css'
 import VueRouter from 'vue-router'
 import store from './vuex/store'
 import Vuex from 'vuex'

src/pages/Home.vue

@@ -1,8 +1,13 @@
 <template>
 	<el-row class="container">
 		<el-col :span="24" class="header">
-			<el-col :span="20" class="logo">
-				VUEADMIN
+			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
+				{{collapsed?'':sysName}}
+			</el-col>
+			<el-col :span="10">
+				<div class="tools" @click.prevent="collapse">
+					<i class="fa fa-align-justify"></i>
+				</div>
 			</el-col>
 			<el-col :span="4" class="userinfo">
 				<el-dropdown trigger="click">
@@ -16,17 +21,34 @@
 			</el-col>
 		</el-col>
 		<el-col :span="24" class="main">
-			<aside>
+			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
+				<!--导航菜单-->
 				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
-					 unique-opened router>
+					 unique-opened router v-show="!collapsed">
 					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
 						<el-submenu :index="index+''" v-if="!item.leaf">
 							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
 							<el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
 						</el-submenu>
 						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
 					</template>
-					</el-menu>
+				</el-menu>
+				<!--导航菜单-折叠后-->
+				<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
+					<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
+						<template v-if="!item.leaf">
+							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
+							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
+								<li v-for="child in item.children" v-if="!child.hidden" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
+							</ul>
+						</template>
+						<template v-else>
+							<li class="el-submenu">
+								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
+							</li>
+						</template>
+					</li>
+				</ul>
 			</aside>
 			<section class="content-container">
 				<div class="grid-content bg-purple-light">
@@ -53,6 +75,8 @@
 	export default {
 		data() {
 			return {
+				sysName:'VUEADMIN',
+				collapsed:false,
 				sysUserName: '',
 				sysUserAvatar: '',
 				form: {
@@ -92,6 +116,13 @@
 				});
 
 
+			},
+			//折叠导航栏
+			collapse:function(){
+				this.collapsed=!this.collapsed;
+			},
+			showMenu(i,status){
+				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
 			}
 		},
 		mounted() {
@@ -101,6 +132,7 @@
 				this.sysUserName = user.name || '';
 				this.sysUserAvatar = user.avatar || '';
 			}
+
 		}
 	}
 
@@ -115,11 +147,12 @@
 		.header {
 			height: 60px;
 			line-height: 60px;
-			background: #18c79c;//#20a0ff
+			background: #20a0ff;//#20a0ff
 			color:#fff;
 			.userinfo {
 				text-align: right;
 				padding-right: 35px;
+				float: right;
 				.userinfo-inner {
 					cursor: pointer;
 					color:#fff;
@@ -133,8 +166,14 @@
 				}
 			}
 			.logo {
+				//width:230px;
+				height:60px;
 				font-size: 22px;
 				padding-left:20px;
+				padding-right:20px;
+				border-color: rgba(238,241,146,0.3);
+				border-right-width: 1px;
+				border-right-style: solid;
 				img {
 					width: 40px;
 					float: left;
@@ -144,29 +183,68 @@
 					color:#fff;
 				}
 			}
+			.logo-width{
+				width:230px;
+			}
+			.logo-collapse-width{
+				width:60px
+			}
+			.tools{
+				padding: 0px 23px;
+				width:14px;
+				height: 60px;
+				line-height: 60px;
+				cursor: pointer;
+			}
 		}
 		.main {
+			display: flex;
 			// background: #324057;
 			position: absolute;
 			top: 60px;
 			bottom: 0px;
 			overflow: hidden;
 			aside {
+				flex:0 0 230px;
 				width: 230px;
-				position: absolute;
-				top: 0px;
-				bottom: 0px;
+				// position: absolute;
+				// top: 0px;
+				// bottom: 0px;
 				.el-menu{
 					height: 100%;
 				}
+				.collapsed{
+					width:60px;
+					.item{
+						position: relative;
+					}
+					.submenu{
+						position:absolute;
+						top:0px;
+						left:60px;
+						z-index:99999;
+						height:auto;
+						display:none;
+					}
+
+				}
+			}
+			.menu-collapsed{
+				flex:0 0 60px;
+				width: 60px;
+			}
+			.menu-expanded{
+				flex:0 0 230px;
+				width: 230px;
 			}
 			.content-container {
 				// background: #f1f2f7;
-				position: absolute;
-				right: 0px;
-				top: 0px;
-				bottom: 0px;
-				left: 230px;
+				flex:1;
+				// position: absolute;
+				// right: 0px;
+				// top: 0px;
+				// bottom: 0px;
+				// left: 230px;
 				overflow-y: scroll;
 				padding: 20px;
 				.breadcrumb-container {