ops
/
jump-web
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

折叠导航菜单

master
taylor 8 years ago
parent
a03ddb3e9f
commit
a78bf5280a
2 changed files with 94 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/main.js
  2. 106
      src/pages/Home.vue

4
src/main.js
View File

@ -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'

106
src/pages/Home.vue
View File

@ -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,9 +21,10 @@
</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>
@ -26,7 +32,23 @@
</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 {

Write Preview
Loading…
Cancel
Save