Browse Source

折叠导航菜单

master
taylor 8 years ago
parent
commit
a78bf5280a
  1. 4
      src/main.js
  2. 104
      src/pages/Home.vue

4
src/main.js

@ -2,8 +2,8 @@ import babelpolyfill from 'babel-polyfill'
import Vue from 'vue' import Vue from 'vue'
import App from './App' import App from './App'
import ElementUI from 'element-ui' 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 VueRouter from 'vue-router'
import store from './vuex/store' import store from './vuex/store'
import Vuex from 'vuex' import Vuex from 'vuex'

104
src/pages/Home.vue

@ -1,8 +1,13 @@
<template> <template>
<el-row class="container"> <el-row class="container">
<el-col :span="24" class="header"> <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>
<el-col :span="4" class="userinfo"> <el-col :span="4" class="userinfo">
<el-dropdown trigger="click"> <el-dropdown trigger="click">
@ -16,9 +21,10 @@
</el-col> </el-col>
</el-col> </el-col>
<el-col :span="24" class="main"> <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" <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"> <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf"> <el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
@ -27,6 +33,22 @@
<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> <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> </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> </aside>
<section class="content-container"> <section class="content-container">
<div class="grid-content bg-purple-light"> <div class="grid-content bg-purple-light">
@ -53,6 +75,8 @@
export default { export default {
data() { data() {
return { return {
sysName:'VUEADMIN',
collapsed:false,
sysUserName: '', sysUserName: '',
sysUserAvatar: '', sysUserAvatar: '',
form: { 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() { mounted() {
@ -101,6 +132,7 @@
this.sysUserName = user.name || ''; this.sysUserName = user.name || '';
this.sysUserAvatar = user.avatar || ''; this.sysUserAvatar = user.avatar || '';
} }
} }
} }
@ -115,11 +147,12 @@
.header { .header {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
background: #18c79c;//#20a0ff
background: #20a0ff;//#20a0ff
color:#fff; color:#fff;
.userinfo { .userinfo {
text-align: right; text-align: right;
padding-right: 35px; padding-right: 35px;
float: right;
.userinfo-inner { .userinfo-inner {
cursor: pointer; cursor: pointer;
color:#fff; color:#fff;
@ -133,8 +166,14 @@
} }
} }
.logo { .logo {
//width:230px;
height:60px;
font-size: 22px; font-size: 22px;
padding-left:20px; padding-left:20px;
padding-right:20px;
border-color: rgba(238,241,146,0.3);
border-right-width: 1px;
border-right-style: solid;
img { img {
width: 40px; width: 40px;
float: left; float: left;
@ -144,29 +183,68 @@
color:#fff; 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 { .main {
display: flex;
// background: #324057; // background: #324057;
position: absolute; position: absolute;
top: 60px; top: 60px;
bottom: 0px; bottom: 0px;
overflow: hidden; overflow: hidden;
aside { aside {
flex:0 0 230px;
width: 230px; width: 230px;
position: absolute;
top: 0px;
bottom: 0px;
// position: absolute;
// top: 0px;
// bottom: 0px;
.el-menu{ .el-menu{
height: 100%; 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 { .content-container {
// background: #f1f2f7; // 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; overflow-y: scroll;
padding: 20px; padding: 20px;
.breadcrumb-container { .breadcrumb-container {

Loading…
Cancel
Save