Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
绝世唐门三哥
Vue Manage System
提交
96018184
Vue Manage System
项目概览
绝世唐门三哥
/
Vue Manage System
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Vue Manage System
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
96018184
编写于
4月 23, 2018
作者:
L
lin-xin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
'header新增全屏和消息功能'
上级
13361b55
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
111 addition
and
30 deletion
+111
-30
src/components/common/Header.vue
src/components/common/Header.vue
+111
-30
未找到文件。
src/components/common/Header.vue
浏览文件 @
96018184
<
template
>
<div
class=
"header"
>
<!-- 折叠按钮 -->
<div
class=
"collapse-btn"
@
click=
"collapseChage"
>
<i
class=
"el-icon-menu"
></i>
</div>
<div
class=
"logo"
>
后台管理系统
</div>
<div
class=
"user-info"
>
<el-dropdown
trigger=
"click"
@
command=
"handleCommand"
>
<span
class=
"el-dropdown-link"
>
<img
class=
"user-logo"
src=
"../../../static/img/img.jpg"
>
{{
username
}}
</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
class=
"header-right"
>
<div
class=
"header-user-con"
>
<!-- 全屏显示 -->
<div
class=
"btn-fullscreen"
@
click=
"handleFullScreen"
>
<el-tooltip
effect=
"dark"
:content=
"fullscreen?`取消全屏`:`全屏`"
placement=
"bottom"
>
<i
class=
"el-icon-rank"
></i>
</el-tooltip>
</div>
<!-- 消息中心 -->
<div
class=
"btn-bell"
>
<el-tooltip
effect=
"dark"
:content=
"message?`有$
{message}条未读消息`:`消息中心`" placement="bottom">
<router-link
to=
"/tabs"
>
<i
class=
"el-icon-bell"
></i>
</router-link>
</el-tooltip>
<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>
</
template
>
...
...
@@ -29,7 +49,9 @@
data
()
{
return
{
collapse
:
false
,
name
:
'
linxin
'
fullscreen
:
false
,
name
:
'
linxin
'
,
message
:
2
}
},
computed
:{
...
...
@@ -39,15 +61,44 @@
}
},
methods
:{
// 用户名下拉菜单选择事件
handleCommand
(
command
)
{
if
(
command
==
'
loginout
'
){
localStorage
.
removeItem
(
'
ms_username
'
)
this
.
$router
.
push
(
'
/login
'
);
}
},
// 侧边栏折叠
collapseChage
(){
this
.
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%
;
height
:
70px
;
font-size
:
22px
;
line-height
:
70px
;
color
:
#fff
;
}
.collapse-btn
{
float
:
left
;
padding
:
0
21px
;
cursor
:
pointer
;
line-height
:
70px
;
}
.collapse-btn
:hover
{
background
:
rgb
(
40
,
52
,
70
);
...
...
@@ -73,30 +125,59 @@
.header
.logo
{
float
:
left
;
width
:
250px
;
/* text-align: center; */
line-height
:
70px
;
}
.
user-info
{
.
header-right
{
float
:
right
;
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
;
display
:
inline-block
;
padding-left
:
50px
;
color
:
#fff
;
width
:
30px
;
height
:
30px
;
text-align
:
center
;
border-radius
:
15px
;
cursor
:
pointer
;
vertical-align
:
middle
;
}
.
user-info
.user-logo
{
.
btn-bell-badge
{
position
:
absolute
;
left
:
0
;
top
:
15px
;
right
:
0
;
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
;
height
:
40px
;
border-radius
:
50%
;
}
.el-dropdown-link
{
color
:
#fff
;
cursor
:
pointer
;
}
.el-dropdown-menu__item
{
text-align
:
center
;
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录