Skip to content

Commit 9601818

Browse files
lin-xinlin-xin
committed
'header新增全屏和消息功能'
1 parent 13361b5 commit 9601818

File tree

1 file changed

+111
-30
lines changed

1 file changed

+111
-30
lines changed

‎src/components/common/Header.vue

Lines changed: 111 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,45 @@
11
<template>
22
<div class="header">
3+
<!-- 折叠按钮 -->
34
<div class="collapse-btn" @click="collapseChage">
45
<i class="el-icon-menu"></i>
56
</div>
67
<div class="logo">后台管理系统</div>
7-
<div class="user-info">
8-
<el-dropdown trigger="click" @command="handleCommand">
9-
<span class="el-dropdown-link">
10-
<img class="user-logo" src="../../../static/img/img.jpg">
11-
{{username}}
12-
</span>
13-
<el-dropdown-menu slot="dropdown">
14-
<a href="http://blog.gdfengshuo.com/about/" target="_blank">
15-
<el-dropdown-item>关于作者</el-dropdown-item>
16-
</a>
17-
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
18-
<el-dropdown-item>项目仓库</el-dropdown-item>
19-
</a>
20-
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
21-
</el-dropdown-menu>
22-
</el-dropdown>
8+
<div class="header-right">
9+
<div class="header-user-con">
10+
<!-- 全屏显示 -->
11+
<div class="btn-fullscreen" @click="handleFullScreen">
12+
<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
13+
<i class="el-icon-rank"></i>
14+
</el-tooltip>
15+
</div>
16+
<!-- 消息中心 -->
17+
<div class="btn-bell">
18+
<el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
19+
<router-link to="/tabs">
20+
<i class="el-icon-bell"></i>
21+
</router-link>
22+
</el-tooltip>
23+
<span class="btn-bell-badge" v-if="message"></span>
24+
</div>
25+
<!-- 用户头像 -->
26+
<div class="user-avator"><img src="static/img/img.jpg"></div>
27+
<!-- 用户名下拉菜单 -->
28+
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
29+
<span class="el-dropdown-link">
30+
{{username}} <i class="el-icon-caret-bottom"></i>
31+
</span>
32+
<el-dropdown-menu slot="dropdown">
33+
<a href="http://blog.gdfengshuo.com/about/" target="_blank">
34+
<el-dropdown-item>关于作者</el-dropdown-item>
35+
</a>
36+
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
37+
<el-dropdown-item>项目仓库</el-dropdown-item>
38+
</a>
39+
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
40+
</el-dropdown-menu>
41+
</el-dropdown>
42+
</div>
2343
</div>
2444
</div>
2545
</template>
@@ -29,7 +49,9 @@
2949
data() {
3050
return {
3151
collapse: false,
32-
name: 'linxin'
52+
fullscreen: false,
53+
name: 'linxin',
54+
message: 2
3355
}
3456
},
3557
computed:{
@@ -39,15 +61,44 @@
3961
}
4062
},
4163
methods:{
64+
// 用户名下拉菜单选择事件
4265
handleCommand(command) {
4366
if(command == 'loginout'){
4467
localStorage.removeItem('ms_username')
4568
this.$router.push('/login');
4669
}
4770
},
71+
// 侧边栏折叠
4872
collapseChage(){
4973
this.collapse = !this.collapse;
5074
bus.$emit('collapse', this.collapse);
75+
},
76+
// 全屏事件
77+
handleFullScreen(){
78+
let element = document.documentElement;
79+
if (this.fullscreen) {
80+
if (document.exitFullscreen) {
81+
document.exitFullscreen();
82+
} else if (document.webkitCancelFullScreen) {
83+
document.webkitCancelFullScreen();
84+
} else if (document.mozCancelFullScreen) {
85+
document.mozCancelFullScreen();
86+
} else if (document.msExitFullscreen) {
87+
document.msExitFullscreen();
88+
}
89+
} else {
90+
if (element.requestFullscreen) {
91+
element.requestFullscreen();
92+
} else if (element.webkitRequestFullScreen) {
93+
element.webkitRequestFullScreen();
94+
} else if (element.mozRequestFullScreen) {
95+
element.mozRequestFullScreen();
96+
} else if (element.msRequestFullscreen) {
97+
// IE11
98+
element.msRequestFullscreen();
99+
}
100+
}
101+
this.fullscreen = !this.fullscreen;
51102
}
52103
}
53104
}
@@ -59,44 +110,74 @@
59110
width: 100%;
60111
height: 70px;
61112
font-size: 22px;
62-
line-height: 70px;
113+
63114
color: #fff;
64115
}
65116
.collapse-btn{
66117
float: left;
67118
padding: 0 21px;
68119
cursor: pointer;
120+
line-height: 70px;
69121
}
70122
.collapse-btn:hover{
71123
background: rgb(40,52,70);
72124
}
73125
.header .logo{
74126
float: left;
75127
width:250px;
76-
/* text-align: center; */
128+
line-height: 70px;
77129
}
78-
.user-info {
130+
.header-right{
79131
float: right;
80132
padding-right: 50px;
81-
font-size: 16px;
82-
color: #fff;
83133
}
84-
.user-info .el-dropdown-link{
134+
.header-user-con{
135+
display: flex;
136+
height: 70px;
137+
align-items: center;
138+
}
139+
.btn-fullscreen{
140+
transform: rotate(45deg);
141+
margin-right: 5px;
142+
font-size: 24px;
143+
}
144+
.btn-bell, .btn-fullscreen{
85145
position: relative;
86-
display: inline-block;
87-
padding-left: 50px;
88-
color: #fff;
146+
width: 30px;
147+
height: 30px;
148+
text-align: center;
149+
border-radius: 15px;
89150
cursor: pointer;
90-
vertical-align: middle;
91151
}
92-
.user-info .user-logo{
152+
.btn-bell-badge{
93153
position: absolute;
94-
left:0;
95-
top:15px;
154+
right: 0;
155+
top: -2px;
156+
width: 8px;
157+
height: 8px;
158+
border-radius: 4px;
159+
background: #f56c6c;
160+
color: #fff;
161+
}
162+
.btn-bell .el-icon-bell{
163+
color: #fff;
164+
}
165+
.user-name{
166+
margin-left: 10px;
167+
}
168+
.user-avator{
169+
margin-left: 20px;
170+
}
171+
.user-avator img{
172+
display: block;
96173
width:40px;
97174
height:40px;
98175
border-radius: 50%;
99176
}
177+
.el-dropdown-link{
178+
color: #fff;
179+
cursor: pointer;
180+
}
100181
.el-dropdown-menu__item{
101182
text-align: center;
102183
}

0 commit comments

Comments
 (0)