Skip to content

Commit 86096e4

Browse files
PanJiaChenPanJiaChen
committed
refactor:router&&sidemenu
1 parent 29ec7f8 commit 86096e4

File tree

10 files changed

+290
-159
lines changed

10 files changed

+290
-159
lines changed

‎src/components/Breadcrumb/index.vue

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
22
<el-breadcrumb class="app-breadcrumb" separator="/">
3-
<transition-group name="breadcrumb">
4-
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
5-
<router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
6-
<router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
7-
</el-breadcrumb-item>
8-
</transition-group>
3+
<transition-group name="breadcrumb">
4+
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if='item.meta.title'>
5+
<span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.meta.title}}</span>
6+
<router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
7+
</el-breadcrumb-item>
8+
</transition-group>
99
</el-breadcrumb>
1010
</template>
1111

@@ -23,8 +23,8 @@ export default {
2323
getBreadcrumb() {
2424
let matched = this.$route.matched.filter(item => item.name)
2525
const first = matched[0]
26-
if (first && (first.name !== 'Home' || first.path !== '')) {
27-
matched = [{ name: 'Home', path: '/' }].concat(matched)
26+
if (first && first.name !== 'dashboard') {
27+
matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
2828
}
2929
this.levelList = matched
3030
}
@@ -38,14 +38,14 @@ export default {
3838
</script>
3939

4040
<style rel="stylesheet/scss" lang="scss" scoped>
41-
.app-breadcrumb.el-breadcrumb {
42-
display: inline-block;
43-
font-size: 14px;
44-
line-height: 50px;
45-
margin-left: 10px;
46-
.no-redirect {
47-
color: #97a8be;
48-
cursor: text;
41+
.app-breadcrumb.el-breadcrumb {
42+
display: inline-block;
43+
font-size: 14px;
44+
line-height: 50px;
45+
margin-left: 10px;
46+
.no-redirect {
47+
color: #97a8be;
48+
cursor: text;
49+
}
4950
}
50-
}
5151
</style>

‎src/components/ScrollBar/index.vue

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div class='scroll-container' ref='scrollContainer' @mousewheel="handleScroll">
3+
<div class='scroll-wrapper' ref='scrollWrapper' :style="{top: top + 'px'}">
4+
<slot></slot>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
const delta = 15
11+
export default {
12+
name: 'scrollBar',
13+
data() {
14+
return {
15+
top: 0
16+
}
17+
},
18+
methods: {
19+
handleScroll(e) {
20+
e.preventDefault()
21+
const $container = this.$refs.scrollContainer
22+
const $containerHeight = $container.offsetHeight
23+
const $wrapper = this.$refs.scrollWrapper
24+
const $wrapperHeight = $wrapper.offsetHeight
25+
if (e.wheelDelta > 0) {
26+
this.top = Math.min(0, this.top + e.wheelDelta)
27+
} else {
28+
if ($containerHeight - delta < $wrapperHeight) {
29+
if (this.top < -($wrapperHeight - $containerHeight + delta)) {
30+
this.top = this.top
31+
} else {
32+
this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight - delta)
33+
}
34+
} else {
35+
this.top = 0
36+
}
37+
}
38+
}
39+
}
40+
}
41+
</script>
42+
43+
<style rel="stylesheet/scss" lang="scss" scoped>
44+
@import '../../styles/variables.scss';
45+
46+
.scroll-container {
47+
position: relative;
48+
width: 100%;
49+
height: 100%;
50+
background-color: $menuBg;
51+
.scroll-wrapper {
52+
position: absolute;
53+
width: 100%!important;
54+
}
55+
}
56+
</style>

‎src/router/index.js

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
import Vue from 'vue'
22
import Router from 'vue-router'
33
const _import = require('./_import_' + process.env.NODE_ENV)
4-
// in development env not use Lazy Loading,because Lazy Loading too many pages will cause webpack hot update too slow.so only in production use Lazy Loading
5-
6-
/* layout */
7-
import Layout from '../views/layout/Layout'
4+
// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
5+
// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
86

97
Vue.use(Router)
108

9+
/* Layout */
10+
import Layout from '../views/layout/Layout'
11+
1112
/**
12-
* icon : the icon show in the sidebar
13-
* hidden : if `hidden:true` will not show in the sidebar
14-
* redirect : if `redirect:noredirect` will not redirct in the levelbar
15-
* noDropdown : if `noDropdown:true` will not has submenu in the sidebar
16-
* meta : `{ role: ['admin'] }` will control the page role
13+
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
14+
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb
15+
* name:'router-name' the name is used by <keep-alive> (must set!!!)
16+
* meta : {
17+
role: ['admin','editor'] will control the page role (you can set multiple roles)
18+
title: 'title' the name show in submenu and breadcrumb (recommend set)
19+
icon: 'svg-name' the icon show in the sidebar,
20+
}
1721
**/
1822
export const constantRouterMap = [
1923
{ path: '/login', component: _import('login/index'), hidden: true },
@@ -24,27 +28,39 @@ export const constantRouterMap = [
2428
redirect: '/dashboard',
2529
name: 'Dashboard',
2630
hidden: true,
27-
children: [{ path: 'dashboard', component: _import('dashboard/index') }]
31+
children: [{
32+
path: 'dashboard',
33+
component: _import('dashboard/index'),
34+
meta: { title: 'dashboard', icon: 'dashboard' }
35+
}]
2836
},
2937

3038
{
3139
path: '/example',
3240
component: Layout,
3341
redirect: 'noredirect',
3442
name: 'Example',
35-
icon: 'example',
43+
meta: { title: 'Example', icon: 'example' },
3644
children: [
37-
{ path: 'index', name: 'Form', icon: 'form', component: _import('page/form') }
45+
{
46+
path: 'index',
47+
name: 'Form',
48+
component: _import('page/form'),
49+
meta: { title: 'Form', icon: 'form' }
50+
}
3851
]
3952
},
4053

4154
{
4255
path: '/table',
4356
component: Layout,
4457
redirect: '/table/index',
45-
icon: 'table',
46-
noDropdown: true,
47-
children: [{ path: 'index', name: 'Table', component: _import('table/index'), meta: { role: ['admin'] }}]
58+
children: [{
59+
path: 'index',
60+
name: 'Table',
61+
component: _import('table/index'),
62+
meta: { title: 'Table', icon: 'table', role: ['admin'] }}
63+
]
4864
},
4965

5066
{ path: '*', redirect: '/404', hidden: true }

‎src/styles/index.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
@import './element-ui.scss';
1+
@import './variables.scss';
22
@import './mixin.scss';
33
@import './transition.scss';
4+
@import './element-ui.scss';
5+
@import './sidebar.scss';
46

57
body {
68
-moz-osx-font-smoothing: grayscale;

‎src/styles/sidebar.scss

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
#app {
2+
// 主体区域
3+
.main-container {
4+
min-height: 100%;
5+
transition: margin-left 0.28s;
6+
margin-left: 180px;
7+
} // 侧边栏
8+
.sidebar-container {
9+
transition: width 0.28s;
10+
width: 180px!important;
11+
height: 100%;
12+
position: fixed;
13+
top: 0;
14+
bottom: 0;
15+
left: 0;
16+
z-index: 1001;
17+
a {
18+
display: inline-block;
19+
width: 100%;
20+
}
21+
.svg-icon {
22+
margin-right: 16px;
23+
}
24+
.el-menu {
25+
border: none;
26+
width: 100%;
27+
}
28+
}
29+
.hideSidebar {
30+
.sidebar-container,.sidebar-container .el-menu {
31+
width: 36px!important;
32+
// overflow: inherit;
33+
}
34+
.main-container {
35+
margin-left: 36px;
36+
}
37+
}
38+
.hideSidebar {
39+
.submenu-title-noDropdown {
40+
padding-left: 10px!important;
41+
position: relative;
42+
span {
43+
height: 0;
44+
width: 0;
45+
overflow: hidden;
46+
visibility: hidden;
47+
transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
48+
opacity: 0;
49+
display: inline-block;
50+
}
51+
&:hover {
52+
span {
53+
display: block;
54+
border-radius: 3px;
55+
z-index: 1002;
56+
width: 140px;
57+
height: 56px;
58+
visibility: visible;
59+
position: absolute;
60+
right: -145px;
61+
text-align: left;
62+
text-indent: 20px;
63+
top: 0px;
64+
background-color: $subMenuBg!important;
65+
opacity: 1;
66+
}
67+
}
68+
}
69+
.el-submenu {
70+
&>.el-submenu__title {
71+
padding-left: 10px!important;
72+
&>span {
73+
display: none;
74+
}
75+
.el-submenu__icon-arrow {
76+
display: none;
77+
}
78+
}
79+
.nest-menu {
80+
.el-submenu__icon-arrow {
81+
display: block!important;
82+
}
83+
span {
84+
display: inline-block!important;
85+
}
86+
}
87+
}
88+
}
89+
.nest-menu .el-submenu>.el-submenu__title,
90+
.el-submenu .el-menu-item {
91+
min-width: 180px!important;
92+
background-color: $subMenuBg!important;
93+
&:hover {
94+
background-color: $menuHover!important;
95+
}
96+
}
97+
.el-menu--collapse .el-menu .el-submenu{
98+
min-width: 180px!important;
99+
}
100+
}

‎src/styles/variables.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
//sidebar
2+
$menuBg:#304156;
3+
$subMenuBg:#1f2d3d;
4+
$menuHover:#001528;

‎src/views/layout/Layout.vue

Lines changed: 8 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
<template>
22
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
3-
<div class="sidebar-wrapper">
4-
<sidebar class="sidebar-container"></sidebar>
5-
</div>
3+
<sidebar class="sidebar-container"></sidebar>
64
<div class="main-container">
75
<navbar></navbar>
86
<app-main></app-main>
97
</div>
108
</div>
119
</template>
1210

13-
1411
<script>
1512
import { Navbar, Sidebar, AppMain } from '@/views/layout/components'
1613
@@ -30,52 +27,11 @@ export default {
3027
</script>
3128

3229
<style rel="stylesheet/scss" lang="scss" scoped>
33-
@import "src/styles/mixin.scss";
34-
.app-wrapper {
35-
@include clearfix;
36-
position: relative;
37-
height: 100%;
38-
width: 100%;
39-
&.hideSidebar {
40-
.sidebar-wrapper {
41-
transform: translate(-140px, 0);
42-
.sidebar-container {
43-
transform: translate(132px, 0);
44-
}
45-
&:hover {
46-
transform: translate(0, 0);
47-
.sidebar-container {
48-
transform: translate(0, 0);
49-
}
50-
}
51-
}
52-
.main-container {
53-
margin-left: 40px;
54-
}
55-
}
56-
.sidebar-wrapper {
57-
width: 180px;
58-
position: fixed;
59-
top: 0;
60-
bottom: 0;
61-
left: 0;
62-
z-index: 1001;
63-
overflow: hidden;
64-
transition: all .28s ease-out;
65-
}
66-
.sidebar-container {
67-
transition: all .28s ease-out;
68-
position: absolute;
69-
top: 0;
70-
bottom: 0;
71-
left: 0;
72-
right: -17px;
73-
overflow-y: scroll;
74-
}
75-
.main-container {
76-
min-height: 100%;
77-
transition: all .28s ease-out;
78-
margin-left: 180px;
79-
}
80-
}
30+
@import "src/styles/mixin.scss";
31+
.app-wrapper {
32+
@include clearfix;
33+
position: relative;
34+
height: 100%;
35+
width: 100%;
36+
}
8137
</style>

0 commit comments

Comments
 (0)