Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
weixin_54851307
vue-vben-admin
提交
6bffdb5c
V
vue-vben-admin
项目概览
weixin_54851307
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
6bffdb5c
编写于
10月 27, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fix the disappearance of tab switching parameters (#56)
上级
c620f827
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
71 addition
and
34 deletion
+71
-34
src/layouts/default/LayoutHeader.tsx
src/layouts/default/LayoutHeader.tsx
+4
-3
src/layouts/default/LayoutMenu.tsx
src/layouts/default/LayoutMenu.tsx
+6
-5
src/layouts/default/multitabs/index.tsx
src/layouts/default/multitabs/index.tsx
+23
-15
src/layouts/default/multitabs/useTabDropdown.ts
src/layouts/default/multitabs/useTabDropdown.ts
+24
-7
src/store/modules/tab.ts
src/store/modules/tab.ts
+13
-3
src/views/demo/feat/tab-params/index.vue
src/views/demo/feat/tab-params/index.vue
+1
-1
未找到文件。
src/layouts/default/LayoutHeader.tsx
浏览文件 @
6bffdb5c
...
...
@@ -22,12 +22,13 @@ import { useModal } from '/@/components/Modal/index';
import
{
errorStore
}
from
'
/@/store/modules/error
'
;
import
{
useWindowSizeFn
}
from
'
/@/hooks/event/useWindowSize
'
;
import
NoticeAction
from
'
./actions/notice/NoticeActionItem.vue
'
;
import
{
useRouter
}
from
'
vue-router
'
;
export
default
defineComponent
({
name
:
'
DefaultLayoutHeader
'
,
setup
()
{
const
widthRef
=
ref
(
200
);
const
{
refreshPage
,
addTab
}
=
useTabs
();
const
{
refreshPage
}
=
useTabs
();
const
{
push
}
=
useRouter
();
const
[
register
,
{
openModal
}]
=
useModal
();
const
{
toggleFullscreen
,
isFullscreenRef
}
=
useFullscreen
();
...
...
@@ -70,7 +71,7 @@ export default defineComponent({
function
handleToErrorList
()
{
errorStore
.
commitErrorListCountState
(
0
);
addTab
(
'
/exception/error-log
'
,
true
);
push
(
'
/exception/error-log
'
);
}
/**
...
...
src/layouts/default/LayoutMenu.tsx
浏览文件 @
6bffdb5c
...
...
@@ -22,8 +22,8 @@ import {
import
{
useRouter
}
from
'
vue-router
'
;
import
{
useThrottle
}
from
'
/@/hooks/core/useThrottle
'
;
import
{
permissionStore
}
from
'
/@/store/modules/permission
'
;
import
{
useTabs
}
from
'
/@/hooks/web/useTabs
'
;
import
{
PageEnum
}
from
'
/@/enums/pageEnum
'
;
//
import { useTabs } from '/@/hooks/web/useTabs';
//
import { PageEnum } from '/@/enums/pageEnum';
// import
export
default
defineComponent
({
...
...
@@ -53,8 +53,8 @@ export default defineComponent({
setup
(
props
)
{
const
menusRef
=
ref
<
Menu
[]
>
([]);
const
flatMenusRef
=
ref
<
Menu
[]
>
([]);
const
{
currentRoute
}
=
useRouter
();
const
{
addTab
}
=
useTabs
();
const
{
currentRoute
,
push
}
=
useRouter
();
//
const { addTab } = useTabs();
const
getProjectConfigRef
=
computed
(()
=>
{
return
appStore
.
getProjectConfig
;
...
...
@@ -144,7 +144,8 @@ export default defineComponent({
if
(
splitType
===
MenuSplitTyeEnum
.
TOP
)
{
menuStore
.
commitCurrentTopSplitMenuPathState
(
path
);
}
addTab
(
path
as
PageEnum
,
true
);
push
(
path
);
// addTab(path as PageEnum, true);
}
}
...
...
src/layouts/default/multitabs/index.tsx
浏览文件 @
6bffdb5c
...
...
@@ -27,6 +27,7 @@ import { useTabs } from '/@/hooks/web/useTabs';
// import { PageEnum } from '/@/enums/pageEnum';
import
'
./index.less
'
;
import
{
userStore
}
from
'
/@/store/modules/user
'
;
export
default
defineComponent
({
name
:
'
MultiTabs
'
,
setup
()
{
...
...
@@ -60,24 +61,27 @@ export default defineComponent({
watch
(
()
=>
unref
(
currentRoute
).
path
,
(
path
)
=>
{
if
(
activeKeyRef
.
value
!==
path
)
{
activeKeyRef
.
value
=
path
;
()
=>
{
if
(
!
userStore
.
getTokenState
)
return
;
const
{
path
:
rPath
,
fullPath
}
=
unref
(
currentRoute
);
if
(
activeKeyRef
.
value
!==
(
fullPath
||
rPath
))
{
activeKeyRef
.
value
=
fullPath
||
rPath
;
}
// 监听路由的话虽然可以,但是路由切换的时间会造成卡顿现象?
// 使用useTab的addTab的话,当用户手动调转,需要自行调用addTab
// tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
const
{
affix
}
=
currentRoute
.
value
.
meta
||
{};
if
(
affix
)
return
;
const
hasInTab
=
tabStore
.
getTabsState
.
some
(
(
item
)
=>
item
.
fullPath
===
currentRoute
.
value
.
fullPath
);
if
(
!
hasInTab
)
{
tabStore
.
commitAddTab
((
unref
(
currentRoute
)
as
unknown
)
as
AppRouteRecordRaw
);
}
tabStore
.
commitAddTab
((
unref
(
currentRoute
)
as
unknown
)
as
AppRouteRecordRaw
);
// const { affix } = currentRoute.value.meta || {};
// if (affix) return;
// const hasInTab = tabStore.getTabsState.some(
// (item) => item.fullPath === currentRoute.value.fullPath
// );
// if (!hasInTab) {
// tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
// }
},
{
flush
:
'
post
'
,
//
flush: 'post',
immediate
:
true
,
}
);
...
...
@@ -115,7 +119,9 @@ export default defineComponent({
// 关闭当前ab
function
handleEdit
(
targetKey
:
string
)
{
// 新增操作隐藏,目前只使用删除操作
const
index
=
unref
(
getTabsState
).
findIndex
((
item
)
=>
item
.
path
===
targetKey
);
const
index
=
unref
(
getTabsState
).
findIndex
(
(
item
)
=>
(
item
.
fullPath
||
item
.
path
)
===
targetKey
);
index
!==
-
1
&&
closeTab
(
unref
(
getTabsState
)[
index
]);
}
...
...
@@ -133,8 +139,10 @@ export default defineComponent({
}
function
renderTabs
()
{
return
unref
(
getTabsState
).
map
((
item
:
TabItem
)
=>
{
const
key
=
item
.
query
?
item
.
fullPath
:
item
.
path
;
return
(
<
Tabs
.
TabPane
key
=
{
item
.
path
}
closable
=
{
!
(
item
&&
item
.
meta
&&
item
.
meta
.
affix
)
}
>
<
Tabs
.
TabPane
key
=
{
key
}
closable
=
{
!
(
item
&&
item
.
meta
&&
item
.
meta
.
affix
)
}
>
{
{
tab
:
()
=>
<
TabContent
tabItem
=
{
item
}
/>,
}
}
...
...
src/layouts/default/multitabs/useTabDropdown.ts
浏览文件 @
6bffdb5c
...
...
@@ -12,6 +12,7 @@ import { PageEnum } from '/@/enums/pageEnum';
import
{
useGo
,
useRedo
}
from
'
/@/hooks/web/usePage
'
;
import
router
from
'
/@/router
'
;
import
{
useTabs
,
isInitUseTab
}
from
'
/@/hooks/web/useTabs
'
;
import
{
RouteLocationRaw
}
from
'
vue-router
'
;
const
{
initTabFn
}
=
useTabs
();
/**
...
...
@@ -92,7 +93,11 @@ export function useTabDropdown(tabContentProps: TabContentProps) {
let
toPath
:
PageEnum
|
string
=
PageEnum
.
BASE_HOME
;
if
(
len
>
0
)
{
toPath
=
unref
(
getTabsState
)[
len
-
1
].
path
;
const
page
=
unref
(
getTabsState
)[
len
-
1
];
const
p
=
page
.
fullPath
||
page
.
path
;
if
(
p
)
{
toPath
=
p
;
}
}
// 跳到当前页面报错
path
!==
toPath
&&
go
(
toPath
as
PageEnum
,
true
);
...
...
@@ -192,7 +197,7 @@ export function useTabDropdown(tabContentProps: TabContentProps) {
}
return
{
getDropMenuList
,
handleMenuEvent
};
}
export
function
closeTab
(
closedTab
:
TabItem
)
{
export
function
closeTab
(
closedTab
:
TabItem
|
AppRouteRecordRaw
)
{
const
{
currentRoute
,
replace
}
=
router
;
// 当前tab列表
const
getTabsState
=
computed
(()
=>
{
...
...
@@ -205,23 +210,35 @@ export function closeTab(closedTab: TabItem) {
return
;
}
// 关闭的为激活atb
let
to
Path
:
PageEnum
|
string
;
let
to
Obj
:
RouteLocationRaw
=
{}
;
const
index
=
unref
(
getTabsState
).
findIndex
((
item
)
=>
item
.
path
===
path
);
// 如果当前为最左边tab
if
(
index
===
0
)
{
// 只有一个tab,则跳转至首页,否则跳转至右tab
if
(
unref
(
getTabsState
).
length
===
1
)
{
to
Path
=
PageEnum
.
BASE_HOME
;
to
Obj
=
PageEnum
.
BASE_HOME
;
}
else
{
// 跳转至右边tab
toPath
=
unref
(
getTabsState
)[
index
+
1
].
path
;
const
page
=
unref
(
getTabsState
)[
index
+
1
];
const
{
params
,
path
,
query
}
=
page
;
toObj
=
{
params
,
path
,
query
,
};
}
}
else
{
// 跳转至左边tab
toPath
=
unref
(
getTabsState
)[
index
-
1
].
path
;
const
page
=
unref
(
getTabsState
)[
index
-
1
];
const
{
params
,
path
,
query
}
=
page
;
toObj
=
{
params
,
path
,
query
,
};
}
const
route
=
(
unref
(
currentRoute
)
as
unknown
)
as
AppRouteRecordRaw
;
tabStore
.
commitCloseTab
(
route
);
replace
(
to
Path
);
replace
(
to
Obj
);
}
src/store/modules/tab.ts
浏览文件 @
6bffdb5c
...
...
@@ -98,11 +98,21 @@ class Tab extends VuexModule {
return
;
}
let
updateIndex
=
-
1
;
// 已经存在的页面,不重复添加tab
const
hasTab
=
this
.
tabsState
.
some
((
tab
)
=>
{
return
tab
.
fullPath
===
fullPath
;
const
hasTab
=
this
.
tabsState
.
some
((
tab
,
index
)
=>
{
updateIndex
=
index
;
return
(
tab
.
fullPath
||
tab
.
path
)
===
(
fullPath
||
path
);
});
if
(
hasTab
)
return
;
if
(
hasTab
)
{
const
curTab
=
toRaw
(
this
.
tabsState
)[
updateIndex
];
if
(
!
curTab
)
return
;
curTab
.
params
=
params
||
curTab
.
params
;
curTab
.
query
=
query
||
curTab
.
query
;
curTab
.
fullPath
=
fullPath
||
curTab
.
fullPath
;
this
.
tabsState
.
splice
(
updateIndex
,
1
,
curTab
);
return
;
}
this
.
tabsState
.
push
({
path
,
fullPath
,
name
,
meta
,
params
,
query
});
if
(
unref
(
getOpenKeepAliveRef
)
&&
name
)
{
...
...
src/views/demo/feat/tab-params/index.vue
浏览文件 @
6bffdb5c
<
template
>
<div
class=
"p-4"
>
Current Param :
{{
params
}}
<
input
/
>
<
!--
<input
/>
--
>
</div>
</
template
>
<
script
lang=
"ts"
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录