Skip to content

Commit bed22cd

Browse files
author
sosout
committed
基础服务--三级菜单
1 parent 4e4290c commit bed22cd

File tree

11 files changed

+259
-43
lines changed

11 files changed

+259
-43
lines changed

‎src/components/layout/consoleBcrumd.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<template>
22
<el-breadcrumb separator="/">
33
<el-breadcrumb-item :to="{ path: '/quick' }">首页</el-breadcrumb-item>
4-
<el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
4+
<div v-if="$route.meta && $route.meta.bcrumd">
5+
<el-breadcrumb-item v-for="(item, index) in $route.meta.bcrumd" :key="index">{{item}}</el-breadcrumb-item>
6+
</div>
57
</el-breadcrumb>
68
</template>
79

‎src/components/layout/consoleNavbar.vue

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<style lang="less">
2+
.console-navbar {
3+
.el-menu {
4+
margin-top: 70px;
5+
width: 150px !important;
6+
height: 100%;
7+
overflow-x: hidden;
8+
overflow-y: auto;
9+
background-color: #eaedf1;
10+
}
11+
.el-menu-item-group__title {
12+
position: fixed;
13+
left: 180px;
14+
top: 50px;
15+
width: 100px;
16+
height: 70px;
17+
line-height: 70px;
18+
background: #d9dee4;
19+
overflow: hidden;
20+
text-overflow: ellipsis;
21+
white-space: nowrap;
22+
font-size: 12px;
23+
font-weight: 700;
24+
color: #333;
25+
padding: 0px 15px !important;
26+
z-index: 10;
27+
}
28+
.el-menu-item {
29+
font-size: 12px;
30+
height: 40px;
31+
line-height: 40px;
32+
&.is-active {
33+
color: #39f;
34+
border-right: 22px solid #39f;
35+
z-index: 2;
36+
background-color: #fff;
37+
}
38+
}
39+
}
40+
</style>
41+
<style lang="less" scoped>
42+
.console-navbar {
43+
position: fixed;
44+
top: 50px;
45+
bottom: 0;
46+
z-index: 2;
47+
overflow: hidden;
48+
transition: all .2s ease;
49+
width: 150px;
50+
&.navbar-full {
51+
left: 180px;
52+
}
53+
.product-nav-stage {
54+
width: 130px;
55+
overflow: hidden;
56+
position: absolute;
57+
top: 0px;
58+
bottom: 0px;
59+
right: 0px;
60+
left: 0;
61+
}
62+
}
63+
</style>
64+
<template>
65+
<div class="console-navbar navbar-full">
66+
<div class="product-nav-stage">
67+
<el-menu mode="vertical" :router='true' :default-active="defaultActive">
68+
<el-menu-item-group :title="$route.meta && $route.meta.bcrumd && $route.meta.bcrumd.length > 0 && $route.meta.bcrumd[1]">
69+
<el-menu-item v-for="(item, index) in $route.meta.navbar" :key="index" :index="item.index" :class="{'is-active': defaultActive == item.index}">{{item.title}}</el-menu-item>
70+
</el-menu-item-group>
71+
</el-menu>
72+
</div>
73+
</div>
74+
</template>
75+
76+
<script>
77+
import { Menu, MenuItem, MenuItemGroup } from 'element-ui';
78+
export default {
79+
components: {
80+
ElMenu: Menu,
81+
ElMenuItem: MenuItem,
82+
ElMenuItemGroup: MenuItemGroup
83+
},
84+
data () {
85+
return {
86+
87+
}
88+
},
89+
computed: {
90+
defaultActive: function() {
91+
console.log(this.$route.path);
92+
return this.$route.path;
93+
}
94+
}
95+
}
96+
</script>

‎src/components/layout/consoleSidebar.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
<i class="el-icon-message"></i>
7575
基础服务
7676
</template>
77-
<el-menu-item index="/thrmenu"><i class="el-icon-document"></i>三级菜单</el-menu-item>
77+
<el-menu-item index="/thrmenu/article"><i class="el-icon-document"></i>三级菜单</el-menu-item>
7878
</el-submenu>
7979
<el-submenu index="user">
8080
<template slot="title">
@@ -97,7 +97,8 @@
9797
},
9898
computed: {
9999
defaultActive: function() {
100-
return this.$route.path;
100+
const that = this;
101+
return that.$route.meta && that.$route.meta.activePath || this.$route.path;
101102
}
102103
}
103104
}

‎src/page/base/thrMenu.vue

-18
This file was deleted.

‎src/page/base/thrmenu/article.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div style="padding: 0px 20px;color: red;">这是基础服务 -- 三级菜单 -- 文章管理 只做演示三级菜单功能</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
data () {
8+
return {
9+
10+
}
11+
}
12+
}
13+
</script>
14+
15+
<style scoped>
16+
17+
</style>

‎src/page/base/thrmenu/comment.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div style="padding: 0px 20px;;color: red;">这是基础服务 -- 三级菜单 -- 评论管理 只做演示三级菜单功能</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
data () {
8+
return {
9+
10+
}
11+
}
12+
}
13+
</script>
14+
15+
<style scoped>
16+
17+
</style>

‎src/page/base/thrmenu/left.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div style="padding: 0px 20px;color: red;">这是基础服务 -- 三级菜单 -- 用户留存 只做演示三级菜单功能</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
data () {
8+
return {
9+
10+
}
11+
}
12+
}
13+
</script>
14+
15+
<style scoped>
16+
17+
</style>

‎src/page/base/thrmenu/lost.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div style="padding: 0px 20px;color: red;">这是基础服务 -- 三级菜单 -- 流失用户 只做演示三级菜单功能</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
data () {
8+
return {
9+
10+
}
11+
}
12+
}
13+
</script>
14+
15+
<style scoped>
16+
17+
</style>

‎src/page/layout.vue

+21-11
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
padding: 50px 0px 0px 180px;
1515
width: auto;
1616
height: auto;
17+
&.console-main-full {
18+
margin-left: 130px;
19+
}
1720
.console-bcrumd {
1821
padding: 0px 20px;
1922
height: 50px;
@@ -26,7 +29,8 @@
2629
<div class="console-body">
2730
<console-topbar></console-topbar>
2831
<console-sidebar></console-sidebar>
29-
<div class="console-main">
32+
<console-navbar v-show="hasNavbar"></console-navbar>
33+
<div class="console-main" :class="{'console-main-full': hasNavbar}">
3034
<console-bcrumd class="console-bcrumd"></console-bcrumd>
3135
<router-view></router-view>
3236
</div>
@@ -36,17 +40,23 @@
3640
import ConsoleTopbar from '../components/layout/consoleTopbar';
3741
import ConsoleSidebar from '../components/layout/consoleSidebar';
3842
import ConsoleBcrumd from '../components/layout/consoleBcrumd';
43+
import ConsoleNavbar from '../components/layout/consoleNavbar';
3944
export default {
40-
data () {
41-
return {
42-
}
43-
},
44-
components: {
45-
ConsoleTopbar,
46-
ConsoleSidebar,
47-
ConsoleBcrumd
48-
},
49-
methods: {
45+
components: {
46+
ConsoleTopbar,
47+
ConsoleSidebar,
48+
ConsoleBcrumd,
49+
ConsoleNavbar
50+
},
51+
data () {
52+
return { }
53+
},
54+
computed: {
55+
hasNavbar () {
56+
const $route = this.$route;
57+
return $route.meta && $route.meta.navbar && $route.meta.navbar.length > 0;
5058
}
59+
},
60+
methods: { }
5161
}
5262
</script>

‎src/page/user/login.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,10 @@
7777
</div>
7878
<el-form :model="formLogin" :rules="rulesLogin" ref="formLogin">
7979
<el-form-item prop="username">
80-
<el-input type="text" v-model="formLogin.username" auto-complete="off"></el-input>
80+
<el-input type="text" v-model="formLogin.username" auto-complete="off" @keyup.enter.native="submitForm('formLogin')"></el-input>
8181
</el-form-item>
8282
<el-form-item prop="password">
83-
<el-input type="password" v-model="formLogin.password" auto-complete="off"></el-input>
83+
<el-input type="password" v-model="formLogin.password" auto-complete="off" @keyup.enter.native="submitForm('formLogin')" ></el-input>
8484
</el-form-item>
8585
<el-form-item>
8686
<el-button type="primary" @click="submitForm('formLogin')">登录</el-button>

‎src/router/index.js

+66-9
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,33 @@ const Layout = r => require.ensure([], () => r(require('../page/layout')), 'layo
55

66
// 快速入门
77
const Quick = r => require.ensure([], () => r(require('../page/quick/quick')), 'quick');
8-
// 基础服务 -- 三级菜单
9-
const Thrmenu = r => require.ensure([], () => r(require('../page/base/thrMenu')), 'thrMenu');
8+
// 基础服务 -- 三级菜单 -- 文章管理
9+
const Article = r => require.ensure([], () => r(require('../page/base/thrmenu/article')), 'article');
10+
// 基础服务 -- 三级菜单 -- 评论管理
11+
const Comment = r => require.ensure([], () => r(require('../page/base/thrmenu/comment')), 'comment');
12+
// 基础服务 -- 三级菜单 -- 用户留存
13+
const Left = r => require.ensure([], () => r(require('../page/base/thrmenu/left')), 'left');
14+
// 基础服务 -- 三级菜单 -- 流失用户
15+
const Lost = r => require.ensure([], () => r(require('../page/base/thrmenu/lost')), 'lost');
16+
1017
// 用户中心 -- 用户管理
1118
const User = r => require.ensure([], () => r(require('../page/user/user')), 'user');
1219

20+
// 基础服务 -- 三级菜单
21+
const thrmenuNavbar = [{
22+
title: '文章管理',
23+
index: '/thrmenu/article'
24+
}, {
25+
title: '评论管理',
26+
index: '/thrmenu/comment'
27+
}, {
28+
title: '用户留存',
29+
index: '/thrmenu/left'
30+
}, {
31+
title: '流失用户',
32+
index: '/thrmenu/lost'
33+
}];
34+
1335
export default [{
1436
path: Config.route.login,
1537
name: 'Login',
@@ -22,17 +44,52 @@ export default [{
2244
path: '/quick',
2345
name: 'Quick',
2446
component: Quick,
25-
meta: ['快速入门']
26-
}, { // 基础服务 -- 三级菜单
27-
path: '/thrmenu',
28-
name: 'Thrmenu',
29-
component: Thrmenu,
30-
meta: ['基础服务', '三级菜单']
47+
meta: {
48+
bcrumd: ['快速入门']
49+
}
50+
}, { // 基础服务 -- 三级菜单 -- 文章管理
51+
path: '/thrmenu/article',
52+
name: 'Article',
53+
component: Article,
54+
meta: {
55+
activePath: '/thrmenu/article',
56+
bcrumd: ['基础服务', '三级菜单', '文章管理'],
57+
navbar: thrmenuNavbar
58+
}
59+
}, { // 基础服务 -- 三级菜单 -- 评论管理
60+
path: '/thrmenu/comment',
61+
name: 'Comment',
62+
component: Comment,
63+
meta: {
64+
activePath: '/thrmenu/article',
65+
bcrumd: ['基础服务', '三级菜单', '评论管理'],
66+
navbar: thrmenuNavbar
67+
}
68+
}, { // 基础服务 -- 三级菜单 -- 用户留存
69+
path: '/thrmenu/left',
70+
name: 'Left',
71+
component: Left,
72+
meta: {
73+
activePath: '/thrmenu/article',
74+
bcrumd: ['基础服务', '三级菜单', '用户留存'],
75+
navbar: thrmenuNavbar
76+
}
77+
}, { // 基础服务 -- 三级菜单 -- 流失用户
78+
path: '/thrmenu/lost',
79+
name: 'Lost',
80+
component: Lost,
81+
meta: {
82+
activePath: '/thrmenu/article',
83+
bcrumd: ['基础服务', '三级菜单', '流失用户'],
84+
navbar: thrmenuNavbar
85+
}
3186
}, { // 用户中心 -- 用户管理
3287
path: '/user',
3388
name: 'User',
3489
component: User,
35-
meta: ['用户中心', '用户管理']
90+
meta: {
91+
bcrumd: ['用户中心', '用户管理']
92+
}
3693
}]
3794
}, {
3895
path: '*',

0 commit comments

Comments
 (0)