Skip to content

Commit f8185bc

Browse files
author
chenx@dtinone.com
committed
🚀 添加纵向导航布局
1 parent 749cf52 commit f8185bc

File tree

7 files changed

+283
-97
lines changed

7 files changed

+283
-97
lines changed

‎src/components/GlobalHeader/GlobalHeader.vue‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@
55
<img src="../../assets/logo.png" />
66
</div>
77
<div class="right-con">
8-
<menus></menus>
9-
<div class="userInfo">
10-
<slot name="userInfo"></slot>
11-
</div>
8+
<slot name="rightCon"></slot>
129
</div>
1310
</a-layout-header>
1411
</div>
@@ -18,12 +15,10 @@
1815
import { RouteConfig, Route } from "vue-router";
1916
import { Component, Vue, Watch, Emit } from "vue-property-decorator";
2017
import { Layout, Menu, Dropdown } from "ant-design-vue";
21-
import Menus from "./Menus.vue";
2218
2319
@Component({
2420
components: {
25-
ALayoutHeader: Layout.Header,
26-
Menus
21+
ALayoutHeader: Layout.Header
2722
}
2823
})
2924
export default class GlobalHeader extends Vue {
@@ -50,6 +45,7 @@ export default class GlobalHeader extends Vue {
5045
height: 54px;
5146
padding: 0 40px 0 15px;
5247
background: @navThemeColor;
48+
border-bottom: 1px solid #434343;
5349
.logo {
5450
min-width: 120px;
5551
height: 46px;
@@ -59,16 +55,5 @@ export default class GlobalHeader extends Vue {
5955
}
6056
}
6157
}
62-
.userInfo {
63-
min-width: 100px;
64-
display: flex;
65-
flex-flow: row nowrap;
66-
align-items: center;
67-
justify-content: flex-end;
68-
.ant-dropdown-trigger {
69-
height: 54px;
70-
line-height: 54px;
71-
}
72-
}
7358
}
7459
</style>

‎src/components/GlobalHeader/Menus.vue‎

Lines changed: 78 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
2-
<div class="menu-class">
2+
<div :class="['menu-class', mode+'-menu-class']">
33
<a-menu
4+
theme="dark"
45
:selected-keys="[activeRoute]"
56
@click="handleMenuItem"
6-
mode="horizontal"
7+
:mode="mode"
78
:style="{ lineHeight: '54px' }"
89
>
910
<template v-for="menu in menuLists">
@@ -31,6 +32,14 @@ import SubMenu from "./SubMenu.vue";
3132
}
3233
})
3334
export default class Menus extends Vue {
35+
@Prop({
36+
type: String,
37+
required: false,
38+
default: "horizontal"
39+
})
40+
mode!: string;
41+
42+
//inital data
3443
private activeRoute: string = "";
3544
private menus: RouteConfig[] = [];
3645
@@ -40,10 +49,10 @@ export default class Menus extends Vue {
4049
}
4150
4251
//inital computed
43-
get menuLists(){
44-
return this.menus.filter((item)=>{
45-
return !item.meta['hidden']
46-
})
52+
get menuLists() {
53+
return this.menus.filter(item => {
54+
return !item.meta["hidden"];
55+
});
4756
}
4857
4958
//获取路由列表
@@ -70,24 +79,60 @@ export default class Menus extends Vue {
7079

7180
<style lang="less" scope>
7281
.menu-class {
73-
.ant-menu {
74-
background: @navThemeColor;
75-
max-width: 700px;
76-
margin-right: 20px;
77-
.ant-menu-item {
78-
color: #b0b0b1;
79-
font-size: 15px;
80-
border-bottom: none;
82+
&.horizontal-menu-class {
83+
.ant-menu {
84+
background: @navThemeColor;
85+
max-width: 700px;
86+
margin-right: 20px;
87+
.ant-menu-item {
88+
color: #b0b0b1;
89+
font-size: 15px;
90+
border-bottom: none;
91+
top: 0;
92+
&-active {
93+
color: rgba(255, 255, 255, 0.9);
94+
}
95+
&-selected {
96+
background: #4a4b4c;
97+
position: relative;
98+
font-weight: 700;
99+
color: rgba(255, 255, 255, 0.9);
100+
border-bottom: none;
101+
&::after {
102+
content: "";
103+
position: absolute;
104+
bottom: 0;
105+
height: 3px;
106+
width: 100%;
107+
background: #0972fe;
108+
left: 0;
109+
}
110+
}
111+
}
112+
}
113+
.ant-menu-submenu {
81114
top: 0;
115+
border-bottom: none;
116+
&-title {
117+
color: #b0b0b1;
118+
font-size: 15px;
119+
&:hover {
120+
color: #fff;
121+
}
122+
}
82123
&-active {
83124
color: rgba(255, 255, 255, 0.9);
125+
border-bottom: none !important;
84126
}
85127
&-selected {
86128
background: #4a4b4c;
87129
position: relative;
88130
font-weight: 700;
89131
color: rgba(255, 255, 255, 0.9);
90-
border-bottom: none;
132+
border-bottom: none !important;
133+
.ant-menu-submenu-title {
134+
color: #fff;
135+
}
91136
&::after {
92137
content: "";
93138
position: absolute;
@@ -100,37 +145,27 @@ export default class Menus extends Vue {
100145
}
101146
}
102147
}
103-
.ant-menu-submenu {
104-
top: 0;
105-
border-bottom: none;
106-
&-title {
107-
color: #b0b0b1;
108-
font-size: 15px;
109-
&:hover {
110-
color: #fff;
111-
}
148+
&.inline-menu-class {
149+
.ant-menu-dark,
150+
.ant-menu-dark .ant-menu-sub {
151+
background: @navThemeColor;
112152
}
113-
&-active {
114-
color: rgba(255, 255, 255, 0.9);
115-
border-bottom: none !important;
153+
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
154+
background: #000c17;
116155
}
117-
&-selected {
118-
background: #4a4b4c;
119-
position: relative;
120-
font-weight: 700;
121-
color: rgba(255, 255, 255, 0.9);
122-
border-bottom: none !important;
123-
.ant-menu-submenu-title {
124-
color: #fff;
156+
.ant-menu-item {
157+
font-size: 15px;
158+
border-bottom: none;
159+
top: 0;
160+
&-active {
161+
background: rgba(57, 57, 57, 0.5);
162+
color: rgba(255, 255, 255, 0.9);
125163
}
126-
&::after {
127-
content: "";
128-
position: absolute;
129-
bottom: 0;
130-
height: 3px;
131-
width: 100%;
132-
background: #0972fe;
133-
left: 0;
164+
&-selected {
165+
background: #1f7eff;
166+
position: relative;
167+
font-weight: 700;
168+
color: rgba(255, 255, 255, 0.9);
134169
}
135170
}
136171
}

‎src/components/GlobalHeader/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
import GlobalHeader from './GlobalHeader.vue'
2-
export default GlobalHeader
2+
import Menus from "./Menus.vue"
3+
4+
export {GlobalHeader, Menus}

src/layouts/BasicLayout.vue renamed to src/layouts/LevelBasicLayout.vue

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
<template>
2-
<a-layout class="layout">
2+
<a-layout class="level-layout">
33
<!-- layout header -->
44
<global-header @goToHome="goToHome">
5-
<div class="userBox" slot="userInfo">
6-
<a-dropdown>
7-
<div>
8-
<img src="../assets/user.png" class="userHead" />
9-
<a @click="e => e.preventDefault()" class="userName">{{userName}}</a>
10-
</div>
11-
<a-menu slot="overlay">
12-
<a-menu-item key="0">
13-
<div @click="handlePass">修改密码</div>
14-
</a-menu-item>
15-
<a-menu-divider />
16-
<a-menu-item key="1">
17-
<div @click="userLoyout">退出</div>
18-
</a-menu-item>
19-
</a-menu>
20-
</a-dropdown>
21-
</div>
5+
<template slot="rightCon">
6+
<menus></menus>
7+
<div class="user-info">
8+
<a-dropdown>
9+
<div>
10+
<img src="../assets/user.png" class="user-head" />
11+
<a @click="e => e.preventDefault()" class="user-name">{{userName}}</a>
12+
</div>
13+
<a-menu slot="overlay">
14+
<a-menu-item key="0">
15+
<div @click="handlePass">修改密码</div>
16+
</a-menu-item>
17+
<a-menu-divider />
18+
<a-menu-item key="1">
19+
<div @click="userLoyout">退出</div>
20+
</a-menu-item>
21+
</a-menu>
22+
</a-dropdown>
23+
</div>
24+
</template>
2225
</global-header>
2326

2427
<!-- layout content -->
@@ -34,23 +37,24 @@
3437
<script lang="ts">
3538
import { logout } from "@/api/users";
3639
import { Component, Vue, Ref } from "vue-property-decorator";
37-
import GlobalHeader from "@/components/GlobalHeader";
40+
import { GlobalHeader, Menus } from "@/components/GlobalHeader";
3841
import UpdatePass from "@/views/user/model/updatePass.vue";
3942
import { Layout, Dropdown, Menu, Icon, Modal } from "ant-design-vue";
4043
4144
@Component({
4245
components: {
46+
Menus,
47+
GlobalHeader,
48+
UpdatePass,
4349
ALayout: Layout,
4450
ALayoutContent: Layout.Content,
45-
GlobalHeader,
4651
ADropdown: Dropdown,
4752
AMenu: Menu,
4853
AMenuItem: Menu.Item,
4954
AMenuDivider: Menu.Divider,
50-
UpdatePass
5155
}
5256
})
53-
export default class ClassName extends Vue {
57+
export default class LevelBasicLayout extends Vue {
5458
@Ref() readonly updatePass!: UpdatePass;
5559
5660
private goToHome() {
@@ -59,20 +63,20 @@ export default class ClassName extends Vue {
5963
6064
//显示修改密码框
6165
private handlePass() {
62-
this.updatePass.show()
66+
this.updatePass.show();
6367
}
6468
65-
get userName(){
66-
let userInfo = sessionStorage.getItem('userInfo')
67-
return userInfo ? JSON.parse(userInfo).username : 'admin'
69+
get userName() {
70+
let userInfo = sessionStorage.getItem("userInfo");
71+
return userInfo ? JSON.parse(userInfo).username : "admin";
6872
}
6973
7074
//用户登出
7175
private userLoyout() {
7276
Modal.confirm({
7377
title: "确定进行[退出]操作?",
7478
okText: "确定",
75-
class:"my-modal",
79+
class: "my-modal",
7680
cancelText: "取消",
7781
onOk: async () => {
7882
let { code } = await logout({});
@@ -90,20 +94,29 @@ export default class ClassName extends Vue {
9094
</script>
9195

9296
<style lang="less" scope>
93-
.layout {
97+
.level-layout {
9498
padding-left: 0px;
9599
min-height: 100vh;
96100
.ant-layout-content {
97101
height: 100%;
98102
}
99-
.userBox {
100-
.userHead {
103+
.user-info {
104+
min-width: 100px;
105+
display: flex;
106+
flex-flow: row nowrap;
107+
align-items: center;
108+
justify-content: flex-end;
109+
.ant-dropdown-trigger {
110+
height: 54px;
111+
line-height: 54px;
112+
}
113+
.user-head {
101114
width: 30px;
102115
height: 30px;
103116
margin-right: 10px;
104117
margin-top: -4px;
105118
}
106-
.userName {
119+
.user-name {
107120
line-height: 54px;
108121
font-size: 16px;
109122
color: rgba(255, 255, 255, 0.85);

0 commit comments

Comments
 (0)