Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
FLIPPED-AURORA
gin-vue-admin
提交
26821536
G
gin-vue-admin
项目概览
FLIPPED-AURORA
/
gin-vue-admin
大约 1 年 前同步成功
通知
334
Star
18155
Fork
5506
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
26821536
编写于
4月 30, 2020
作者:
Mr.奇淼(
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
标签页右键功能
上级
ef653431
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
181 addition
and
62 deletion
+181
-62
web/src/view/layout/aside/historyComponent/history.vue
web/src/view/layout/aside/historyComponent/history.vue
+181
-62
未找到文件。
web/src/view/layout/aside/historyComponent/history.vue
浏览文件 @
26821536
<
template
>
<div
class=
"router-history"
>
<el-tabs
v-model=
"activeValue"
type=
"card"
:closable=
"!(historys.length==1&&this.$route.name=='dashboard')"
@
tab-click=
"changeTab"
@
tab-remove=
"removeTab"
>
<el-tab-pane
v-for=
"item in historys"
:key=
"item.name"
:label=
"item.meta.title"
:name=
"item.name"
>
</el-tab-pane>
</el-tabs>
</div>
<div
class=
"router-history"
>
<el-tabs
:closable=
"!(historys.length==1&&this.$route.name=='dashboard')"
@
contextmenu.prevent.native=
"openContextMenu($event)"
@
tab-click=
"changeTab"
@
tab-remove=
"removeTab"
type=
"card"
v-model=
"activeValue"
>
<el-tab-pane
:key=
"item.name"
:label=
"item.meta.title"
:name=
"item.name"
v-for=
"item in historys"
></el-tab-pane>
</el-tabs>
<!--自定义右键菜单html代码-->
<ul
:style=
"
{left:left+'px',top:top+'px'}" class="contextmenu" v-show="contextMenuVisible">
<li
@
click=
"closeAll"
>
关闭所有
</li>
<li
@
click=
"closeLeft"
>
关闭左边
</li>
<li
@
click=
"closeRight"
>
关闭右边
</li>
<li
@
click=
"closeOther"
>
关闭其他
</li>
</ul>
</div>
</
template
>
<
script
>
export
default
{
name
:
"
HistoryComponent
"
,
data
(){
return
{
historys
:[],
activeValue
:
"
dashboard
"
name
:
'
HistoryComponent
'
,
data
()
{
return
{
historys
:
[],
activeValue
:
'
dashboard
'
,
contextMenuVisible
:
false
,
left
:
0
,
top
:
0
,
isCollapse
:
false
,
rightActive
:
''
}
},
created
()
{
const
initHistorys
=
[
{
name
:
'
dashboard
'
,
meta
:
{
title
:
'
仪表盘
'
}
}
]
this
.
historys
=
JSON
.
parse
(
sessionStorage
.
getItem
(
'
historys
'
))
||
initHistorys
this
.
setTab
(
this
.
$route
)
},
mounted
()
{
this
.
$bus
.
on
(
'
totalCollapse
'
,
()
=>
{
this
.
isCollapse
=
!
this
.
isCollapse
})
},
methods
:
{
openContextMenu
(
e
)
{
if
(
this
.
historys
.
length
==
1
&&
this
.
$route
.
name
==
'
dashboard
'
)
{
return
false
}
if
(
e
.
srcElement
.
id
)
{
this
.
contextMenuVisible
=
true
let
width
if
(
this
.
isCollapse
)
{
width
=
60
}
else
{
width
=
220
}
this
.
left
=
e
.
clientX
-
width
this
.
top
=
e
.
clientY
+
10
this
.
rightActive
=
e
.
srcElement
.
id
.
split
(
'
-
'
)[
1
]
}
},
closeAll
()
{
this
.
historys
=
[
{
name
:
'
dashboard
'
,
meta
:
{
title
:
'
仪表盘
'
}
}
]
this
.
$router
.
push
({
name
:
'
dashboard
'
})
this
.
contextMenuVisible
=
false
sessionStorage
.
setItem
(
'
historys
'
,
JSON
.
stringify
(
this
.
historys
))
},
closeLeft
()
{
const
rightIndex
=
this
.
historys
.
findIndex
(
item
=>
item
.
name
==
this
.
rightActive
)
const
activeIndex
=
this
.
historys
.
findIndex
(
item
=>
item
.
name
==
this
.
activeValue
)
this
.
historys
.
splice
(
0
,
rightIndex
)
if
(
rightIndex
>
activeIndex
)
{
this
.
$router
.
push
({
name
:
this
.
rightActive
})
}
sessionStorage
.
setItem
(
'
historys
'
,
JSON
.
stringify
(
this
.
historys
))
},
closeRight
()
{
const
leftIndex
=
this
.
historys
.
findIndex
(
item
=>
item
.
name
==
this
.
rightActive
)
const
activeIndex
=
this
.
historys
.
findIndex
(
item
=>
item
.
name
==
this
.
activeValue
)
this
.
historys
.
splice
(
leftIndex
,
this
.
historys
.
length
)
if
(
leftIndex
<
activeIndex
)
{
this
.
$router
.
push
({
name
:
this
.
rightActive
})
}
sessionStorage
.
setItem
(
'
historys
'
,
JSON
.
stringify
(
this
.
historys
))
},
created
(){
const
initHistorys
=
[
{
name
:
"
dashboard
"
,
meta
:{
title
:
"
仪表盘
"
}
}
]
this
.
historys
=
JSON
.
parse
(
sessionStorage
.
getItem
(
"
historys
"
))
||
initHistorys
this
.
setTab
(
this
.
$route
)
closeOther
()
{
this
.
historys
=
this
.
historys
.
filter
(
item
=>
item
.
name
==
this
.
rightActive
)
this
.
$router
.
push
({
name
:
this
.
rightActive
})
sessionStorage
.
setItem
(
'
historys
'
,
JSON
.
stringify
(
this
.
historys
))
},
methods
:{
setTab
(
route
){
if
(
!
this
.
historys
.
some
(
item
=>
item
.
name
==
route
.
name
)){
const
obj
=
{}
obj
.
name
=
route
.
name
obj
.
meta
=
route
.
meta
this
.
historys
.
push
(
obj
)
}
this
.
activeValue
=
this
.
$route
.
name
},
changeTab
(
tab
){
this
.
$router
.
push
({
name
:
tab
.
name
})
},
removeTab
(
tab
){
const
index
=
this
.
historys
.
findIndex
(
item
=>
item
.
name
==
tab
)
if
(
this
.
$route
.
name
==
tab
){
if
(
this
.
historys
.
length
==
1
){
this
.
$router
.
push
({
name
:
"
dashboard
"
})
}
else
{
if
(
index
<
this
.
historys
.
length
-
1
){
this
.
$router
.
push
({
name
:
this
.
historys
[
index
+
1
].
name
})
}
else
{
this
.
$router
.
push
({
name
:
this
.
historys
[
index
-
1
].
name
})
}
}
}
this
.
historys
.
splice
(
index
,
1
)
setTab
(
route
)
{
if
(
!
this
.
historys
.
some
(
item
=>
item
.
name
==
route
.
name
))
{
const
obj
=
{}
obj
.
name
=
route
.
name
obj
.
meta
=
route
.
meta
this
.
historys
.
push
(
obj
)
}
this
.
activeValue
=
this
.
$route
.
name
},
changeTab
(
tab
)
{
this
.
$router
.
push
({
name
:
tab
.
name
})
},
removeTab
(
tab
)
{
const
index
=
this
.
historys
.
findIndex
(
item
=>
item
.
name
==
tab
)
if
(
this
.
$route
.
name
==
tab
)
{
if
(
this
.
historys
.
length
==
1
)
{
this
.
$router
.
push
({
name
:
'
dashboard
'
})
}
else
{
if
(
index
<
this
.
historys
.
length
-
1
)
{
this
.
$router
.
push
({
name
:
this
.
historys
[
index
+
1
].
name
})
}
else
{
this
.
$router
.
push
({
name
:
this
.
historys
[
index
-
1
].
name
})
}
}
}
this
.
historys
.
splice
(
index
,
1
)
}
},
watch
:
{
contextMenuVisible
()
{
if
(
this
.
contextMenuVisible
)
{
document
.
body
.
addEventListener
(
'
click
'
,
()
=>
{
this
.
contextMenuVisible
=
false
})
}
else
{
document
.
body
.
removeEventListener
(
'
click
'
,
()
=>
{
this
.
contextMenuVisible
=
false
})
}
},
watch
:{
$route
(
to
){
this
.
historys
=
this
.
historys
.
filter
(
item
=>!
item
.
meta
.
hidden
)
this
.
setTab
(
to
)
sessionStorage
.
setItem
(
"
historys
"
,
JSON
.
stringify
(
this
.
historys
))
}
$route
(
to
)
{
this
.
historys
=
this
.
historys
.
filter
(
item
=>
!
item
.
meta
.
hidden
)
this
.
setTab
(
to
)
sessionStorage
.
setItem
(
'
historys
'
,
JSON
.
stringify
(
this
.
historys
))
}
}
}
</
script
>
<
style
lang=
"scss"
>
.contextmenu
{
width
:
100px
;
margin
:
0
;
border
:
1px
solid
#ccc
;
background
:
#fff
;
z-index
:
3000
;
position
:
absolute
;
list-style-type
:
none
;
padding
:
5px
0
;
border-radius
:
4px
;
font-size
:
14px
;
color
:
#333
;
box-shadow
:
2px
2px
3px
0
rgba
(
0
,
0
,
0
,
0
.2
);
}
.contextmenu
li
{
margin
:
0
;
padding
:
7px
16px
;
}
.contextmenu
li
:hover
{
background
:
#f2f2f2
;
cursor
:
pointer
;
}
</
style
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录