github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

'header新增全屏和消息功能'

pull/80/head
lin-xin 2018-04-23 12:00:01 +08:00
parent 13361b55ef
commit 9601818407
1 changed files with 111 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/common/Header.vue
View File

@ -1,25 +1,45 @@
<template> <template>
<div class="header"> <div class="header">
<!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage"> <div class="collapse-btn" @click="collapseChage">
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
</div> </div>
<div class="logo">后台管理系统</div> <div class="logo">后台管理系统</div>
<div class="user-info"> <div class="header-right">
<el-dropdown trigger="click" @command="handleCommand"> <div class="header-user-con">
<span class="el-dropdown-link"> <!-- 全屏显示 -->
<img class="user-logo" src="../../../static/img/img.jpg"> <div class="btn-fullscreen" @click="handleFullScreen">
{{username}} <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
</span> <i class="el-icon-rank"></i>
<el-dropdown-menu slot="dropdown"> </el-tooltip>
<a href="http://blog.gdfengshuo.com/about/" target="_blank"> </div>
<el-dropdown-item>关于作者</el-dropdown-item> <!-- 消息中心 -->
</a> <div class="btn-bell">
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
<el-dropdown-item>项目仓库</el-dropdown-item> <router-link to="/tabs">
</a> <i class="el-icon-bell"></i>
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item> </router-link>
</el-dropdown-menu> </el-tooltip>
</el-dropdown> <span class="btn-bell-badge" v-if="message"></span>
</div>
<!-- 用户头像 -->
<div class="user-avator"><img src="static/img/img.jpg"></div>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{username}} <i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<a href="http://blog.gdfengshuo.com/about/" target="_blank">
<el-dropdown-item>关于作者</el-dropdown-item>
</a>
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
<el-dropdown-item>项目仓库</el-dropdown-item>
</a>
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -29,7 +49,9 @@
data() { data() {
return { return {
collapse: false, collapse: false,
name: 'linxin' fullscreen: false,
name: 'linxin',
message: 2
} }
}, },
computed:{ computed:{
@ -39,15 +61,44 @@
} }
}, },
methods:{ methods:{
// 用户名下拉菜单选择事件
handleCommand(command) { handleCommand(command) {
if(command == 'loginout'){ if(command == 'loginout'){
localStorage.removeItem('ms_username') localStorage.removeItem('ms_username')
this.$router.push('/login'); this.$router.push('/login');
} }
}, },
// 侧边栏折叠
collapseChage(){ collapseChage(){
this.collapse = !this.collapse; this.collapse = !this.collapse;
bus.$emit('collapse', this.collapse); bus.$emit('collapse', this.collapse);
},
// 全屏事件
handleFullScreen(){
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
} }
} }
} }
@ -59,13 +110,14 @@
width: 100%; width: 100%;
height: 70px; height: 70px;
font-size: 22px; font-size: 22px;
line-height: 70px;
color: #fff; color: #fff;
} }
.collapse-btn{ .collapse-btn{
float: left; float: left;
padding: 0 21px; padding: 0 21px;
cursor: pointer; cursor: pointer;
line-height: 70px;
} }
.collapse-btn:hover{ .collapse-btn:hover{
background: rgb(40,52,70); background: rgb(40,52,70);
@ -73,30 +125,59 @@
.header .logo{ .header .logo{
float: left; float: left;
width:250px; width:250px;
/* text-align: center; */ line-height: 70px;
} }
.user-info { .header-right{
float: right; float: right;
padding-right: 50px; padding-right: 50px;
font-size: 16px;
color: #fff;
} }
.user-info .el-dropdown-link{ .header-user-con{
display: flex;
height: 70px;
align-items: center;
}
.btn-fullscreen{
transform: rotate(45deg);
margin-right: 5px;
font-size: 24px;
}
.btn-bell, .btn-fullscreen{
position: relative; position: relative;
display: inline-block; width: 30px;
padding-left: 50px; height: 30px;
color: #fff; text-align: center;
border-radius: 15px;
cursor: pointer; cursor: pointer;
vertical-align: middle;
} }
.user-info .user-logo{ .btn-bell-badge{
position: absolute; position: absolute;
left:0; right: 0;
top:15px; top: -2px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #f56c6c;
color: #fff;
}
.btn-bell .el-icon-bell{
color: #fff;
}
.user-name{
margin-left: 10px;
}
.user-avator{
margin-left: 20px;
}
.user-avator img{
display: block;
width:40px; width:40px;
height:40px; height:40px;
border-radius: 50%; border-radius: 50%;
} }
.el-dropdown-link{
color: #fff;
cursor: pointer;
}
.el-dropdown-menu__item{ .el-dropdown-menu__item{
text-align: center; text-align: center;
} }