Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Simoje丶
vue-vben-admin
提交
f2bdf0b8
V
vue-vben-admin
项目概览
Simoje丶
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
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 搜索 >>
提交
f2bdf0b8
编写于
10月 12, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf: optimize multiple-tab switching effect
上级
949db963
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
72 addition
and
17 deletion
+72
-17
src/design/transition/base.less
src/design/transition/base.less
+2
-2
src/design/transition/breadcrumb.less
src/design/transition/breadcrumb.less
+1
-1
src/design/transition/fade.less
src/design/transition/fade.less
+4
-4
src/design/transition/zoom.less
src/design/transition/zoom.less
+2
-2
src/hooks/web/useTabs.ts
src/hooks/web/useTabs.ts
+11
-0
src/layouts/default/LayoutMenu.tsx
src/layouts/default/LayoutMenu.tsx
+4
-4
src/layouts/default/multitabs/index.tsx
src/layouts/default/multitabs/index.tsx
+13
-2
src/router/guard/pageLoadingGuard.ts
src/router/guard/pageLoadingGuard.ts
+4
-0
src/store/modules/tab.ts
src/store/modules/tab.ts
+8
-0
src/views/demo/feat/tabs/index.vue
src/views/demo/feat/tabs/index.vue
+23
-2
未找到文件。
src/design/transition/base.less
浏览文件 @
f2bdf0b8
.transition-default() {
&-enter-active,
&-leave-active {
transition: 0.
3
s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
transition: 0.
2
s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
&-move {
transition: transform 0.
6
s;
transition: transform 0.
5
s;
}
}
...
...
src/design/transition/breadcrumb.less
浏览文件 @
f2bdf0b8
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all 0.
38
s;
transition: all 0.
24
s;
}
.breadcrumb-enter-from,
...
...
src/design/transition/fade.less
浏览文件 @
f2bdf0b8
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2
8
s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
...
...
@@ -11,7 +11,7 @@
// side-fade
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: opacity 0.3
5s, transform 0.4
s;
transition: opacity 0.3
s, transform 0.35
s;
}
.slide-enter-from,
...
...
@@ -32,7 +32,7 @@
// Speed: 1x
.fade-bottom-enter-active,
.fade-bottom-leave-active {
transition: opacity 0.
3s, transform 0.3
5s;
transition: opacity 0.
2s, transform 0.2
5s;
}
.fade-bottom-enter-from,
...
...
@@ -53,7 +53,7 @@
// Speed: 1x
.fade-top-enter-active,
.fade-top-leave-active {
transition: opacity 0.
3s, transform 0.3
5s;
transition: opacity 0.
2s, transform 0.2
5s;
}
.fade-top-enter-from {
...
...
src/design/transition/zoom.less
浏览文件 @
f2bdf0b8
// zoom-out
.zoom-out-enter-active,
.zoom-out-leave-active {
transition: opacity 0.
35s ease-in-out, transform 0.45
s ease-out;
transition: opacity 0.
2 ease-in-out, transform 0.2
s ease-out;
}
.zoom-out-enter-from,
...
...
@@ -13,7 +13,7 @@
// zoom-fade
.zoom-fade-enter-active,
.zoom-fade-leave-active {
transition: transform 0.
35s, opacity 0.35
s ease-out;
transition: transform 0.
2s, opacity 0.2
s ease-out;
}
.zoom-fade-enter-from {
...
...
src/hooks/web/useTabs.ts
浏览文件 @
f2bdf0b8
import
{
useTimeout
}
from
'
/@/hooks/core/useTimeout
'
;
import
{
PageEnum
}
from
'
/@/enums/pageEnum
'
;
import
{
TabItem
,
tabStore
}
from
'
/@/store/modules/tab
'
;
import
{
appStore
}
from
'
/@/store/modules/app
'
;
import
router
from
'
/@/router
'
;
type
Fn
=
()
=>
void
;
type
RouteFn
=
(
tabItem
:
TabItem
)
=>
void
;
...
...
@@ -66,5 +70,12 @@ export function useTabs() {
closeOther
:
()
=>
canIUseFn
()
&&
closeOther
(
tabStore
.
getCurrentTab
),
closeCurrent
:
()
=>
canIUseFn
()
&&
closeCurrent
(
tabStore
.
getCurrentTab
),
resetCache
:
()
=>
canIUseFn
()
&&
resetCache
(),
addTab
:
(
path
:
PageEnum
,
goTo
=
false
)
=>
{
useTimeout
(()
=>
{
tabStore
.
addTabByPathAction
(
path
);
},
0
);
goTo
&&
router
.
push
(
path
);
},
};
}
src/layouts/default/LayoutMenu.tsx
浏览文件 @
f2bdf0b8
...
...
@@ -5,7 +5,6 @@ import { computed, defineComponent, unref, ref, onMounted, watch } from 'vue';
import
{
BasicMenu
}
from
'
/@/components/Menu/index
'
;
import
Logo
from
'
/@/layouts/Logo.vue
'
;
import
{
PageEnum
}
from
'
/@/enums/pageEnum
'
;
import
{
MenuModeEnum
,
MenuSplitTyeEnum
,
MenuTypeEnum
}
from
'
/@/enums/menuEnum
'
;
// store
...
...
@@ -20,10 +19,11 @@ import {
getFlatChildrenMenus
,
getCurrentParentPath
,
}
from
'
/@/router/menus/index
'
;
import
{
useGo
}
from
'
/@/hooks/web/usePage
'
;
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
export
default
defineComponent
({
...
...
@@ -54,6 +54,7 @@ export default defineComponent({
const
menusRef
=
ref
<
Menu
[]
>
([]);
const
flatMenusRef
=
ref
<
Menu
[]
>
([]);
const
{
currentRoute
}
=
useRouter
();
const
{
addTab
}
=
useTabs
();
const
getProjectConfigRef
=
computed
(()
=>
{
return
appStore
.
getProjectConfig
;
...
...
@@ -63,7 +64,6 @@ export default defineComponent({
return
unref
(
getProjectConfigRef
).
menuSetting
.
mode
===
MenuModeEnum
.
HORIZONTAL
;
});
const
go
=
useGo
();
onMounted
(()
=>
{
genMenus
();
});
...
...
@@ -144,7 +144,7 @@ export default defineComponent({
if
(
splitType
===
MenuSplitTyeEnum
.
TOP
)
{
menuStore
.
commitCurrentTopSplitMenuPathState
(
path
);
}
go
(
path
as
PageEnum
);
addTab
(
path
as
PageEnum
,
true
);
}
}
...
...
src/layouts/default/multitabs/index.tsx
浏览文件 @
f2bdf0b8
...
...
@@ -2,7 +2,7 @@ import type { TabContentProps } from './tab.data';
import
type
{
TabItem
}
from
'
/@/store/modules/tab
'
;
import
type
{
AppRouteRecordRaw
}
from
'
/@/router/types
'
;
import
{
defineComponent
,
watch
,
computed
,
ref
,
unref
}
from
'
vue
'
;
import
{
defineComponent
,
watch
,
computed
,
ref
,
unref
,
onMounted
}
from
'
vue
'
;
import
{
Tabs
}
from
'
ant-design-vue
'
;
import
TabContent
from
'
./TabContent
'
;
...
...
@@ -16,12 +16,21 @@ import './index.less';
import
{
tabStore
}
from
'
/@/store/modules/tab
'
;
import
{
closeTab
}
from
'
./useTabDropdown
'
;
import
router
from
'
/@/router
'
;
import
{
useTabs
}
from
'
/@/hooks/web/useTabs
'
;
import
{
PageEnum
}
from
'
/@/enums/pageEnum
'
;
export
default
defineComponent
({
name
:
'
MultiTabs
'
,
setup
()
{
let
isAddAffix
=
false
;
const
go
=
useGo
();
const
{
currentRoute
}
=
useRouter
();
onMounted
(()
=>
{
const
{
addTab
}
=
useTabs
();
addTab
(
unref
(
currentRoute
).
path
as
PageEnum
);
});
// 当前激活tab
const
activeKeyRef
=
ref
<
string
>
(
''
);
// 当前tab列表
...
...
@@ -38,7 +47,9 @@ export default defineComponent({
}
activeKeyRef
.
value
=
path
;
tabStore
.
commitAddTab
((
unref
(
currentRoute
)
as
unknown
)
as
AppRouteRecordRaw
);
// 监听路由的话虽然可以,但是路由切换的时间会造成卡顿现象?
// 使用useTab的addTab的话,当用户手动调转,需要自行调用addTab
// tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
},
{
immediate
:
true
,
...
...
src/router/guard/pageLoadingGuard.ts
浏览文件 @
f2bdf0b8
...
...
@@ -6,6 +6,9 @@ import { userStore } from '/@/store/modules/user';
export
function
createPageLoadingGuard
(
router
:
Router
)
{
let
isFirstLoad
=
true
;
router
.
beforeEach
(
async
(
to
)
=>
{
console
.
log
(
'
======================
'
);
console
.
log
(
2
);
console
.
log
(
'
======================
'
);
const
{
openKeepAlive
,
openRouterTransition
,
...
...
@@ -21,6 +24,7 @@ export function createPageLoadingGuard(router: Router) {
}
if
(
show
&&
openKeepAlive
&&
!
isFirstLoad
)
{
const
tabList
=
tabStore
.
getTabsState
;
const
isOpen
=
tabList
.
some
((
tab
)
=>
tab
.
path
===
to
.
path
);
appStore
.
setPageLoadingAction
(
!
isOpen
);
}
else
{
...
...
src/store/modules/tab.ts
浏览文件 @
f2bdf0b8
...
...
@@ -180,6 +180,14 @@ class Tab extends VuexModule {
}
}
@
Action
addTabByPathAction
(
path
:
string
):
void
{
if
(
!
path
)
return
;
const
routes
=
router
.
getRoutes
();
const
to
=
routes
.
find
((
item
)
=>
item
.
path
===
path
);
to
&&
this
.
commitAddTab
((
to
as
unknown
)
as
AppRouteRecordRaw
);
}
@
Action
closeRightTabAction
(
route
:
AppRouteRecordRaw
|
TabItem
):
void
{
const
index
=
this
.
tabsState
.
findIndex
((
item
)
=>
item
.
path
===
route
.
path
);
...
...
src/views/demo/feat/tabs/index.vue
浏览文件 @
f2bdf0b8
...
...
@@ -11,19 +11,40 @@
<a-button
class=
"mr-2"
@
click=
"closeOther"
>
关闭其他
</a-button>
<a-button
class=
"mr-2"
@
click=
"closeCurrent"
>
关闭当前
</a-button>
<a-button
class=
"mr-2"
@
click=
"refreshPage"
>
刷新当前
</a-button>
<a-button
class=
"mr-2"
@
click=
"openTab"
>
打开图标界面tab
</a-button>
</CollapseContainer>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
CollapseContainer
}
from
'
/@/components/Container/index
'
;
import
{
PageEnum
}
from
'
/@/enums/pageEnum
'
;
import
{
useTabs
}
from
'
/@/hooks/web/useTabs
'
;
export
default
defineComponent
({
name
:
'
TabsDemo
'
,
components
:
{
CollapseContainer
},
setup
()
{
const
{
closeAll
,
closeLeft
,
closeRight
,
closeOther
,
closeCurrent
,
refreshPage
}
=
useTabs
();
return
{
closeAll
,
closeLeft
,
closeRight
,
closeOther
,
closeCurrent
,
refreshPage
};
const
{
closeAll
,
closeLeft
,
closeRight
,
closeOther
,
closeCurrent
,
refreshPage
,
addTab
,
}
=
useTabs
();
return
{
closeAll
,
closeLeft
,
closeRight
,
closeOther
,
closeCurrent
,
refreshPage
,
openTab
:
()
=>
{
addTab
(
'
/feat/icon
'
as
PageEnum
,
true
);
},
};
},
});
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录