Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zuiqiangwanggong
vue-vben-admin
提交
a7a8b894
V
vue-vben-admin
项目概览
zuiqiangwanggong
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
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 搜索 >>
提交
a7a8b894
编写于
1月 04, 2021
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(transition): fix transition not work
上级
da76f3c7
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
78 addition
and
23 deletion
+78
-23
src/components/Loading/index.ts
src/components/Loading/index.ts
+5
-2
src/components/Table/src/hooks/useTable.ts
src/components/Table/src/hooks/useTable.ts
+1
-0
src/layouts/default/content/index.vue
src/layouts/default/content/index.vue
+0
-1
src/layouts/iframe/index.vue
src/layouts/iframe/index.vue
+9
-3
src/layouts/page/ParentView.vue
src/layouts/page/ParentView.vue
+20
-4
src/layouts/page/index.tsx
src/layouts/page/index.tsx
+13
-12
src/layouts/page/transition.ts
src/layouts/page/transition.ts
+29
-0
src/router/guard/index.ts
src/router/guard/index.ts
+1
-1
未找到文件。
src/components/Loading/index.ts
浏览文件 @
a7a8b894
import
{
createAsyncComponent
}
from
'
/@/utils/factory/createAsyncComponent
'
;
export
const
Loading
=
createAsyncComponent
(()
=>
import
(
'
./src/index.vue
'
));
//
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
//
export const Loading = createAsyncComponent(() => import('./src/index.vue'));
import
Loading
from
'
./src/index.vue
'
;
export
{
Loading
};
export
{
useLoading
}
from
'
./src/useLoading
'
;
export
{
createLoading
}
from
'
./src/createLoading
'
;
src/components/Table/src/hooks/useTable.ts
浏览文件 @
a7a8b894
...
...
@@ -42,6 +42,7 @@ export function useTable(
},
{
immediate
:
true
,
deep
:
true
,
}
);
}
...
...
src/layouts/default/content/index.vue
浏览文件 @
a7a8b894
...
...
@@ -28,7 +28,6 @@
const
{
prefixCls
}
=
useDesign
(
'
layout-content
'
);
const
{
getOpenPageLoading
}
=
useTransitionSetting
();
const
{
getLayoutContentMode
,
getPageLoading
}
=
useRootSetting
();
return
{
prefixCls
,
getOpenPageLoading
,
...
...
src/layouts/iframe/index.vue
浏览文件 @
a7a8b894
<
template
>
<div>
<div
v-if=
"showFrame"
>
<template
v-for=
"frame in getFramePages"
:key=
"frame.path"
>
<FramePage
v-if=
"frame.meta.frameSrc && hasRenderFrame(frame.name)"
...
...
@@ -10,7 +10,7 @@
</div>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
defineComponent
,
unref
,
computed
}
from
'
vue
'
;
import
FramePage
from
'
/@/views/sys/iframe/index.vue
'
;
import
{
useFrameKeepAlive
}
from
'
./useFrameKeepAlive
'
;
...
...
@@ -19,7 +19,13 @@
name
:
'
FrameLayout
'
,
components
:
{
FramePage
},
setup
()
{
return
{
...
useFrameKeepAlive
()
};
const
{
getFramePages
,
hasRenderFrame
,
showIframe
}
=
useFrameKeepAlive
();
const
showFrame
=
computed
(()
=>
{
return
unref
(
getFramePages
).
length
>
0
;
});
return
{
getFramePages
,
hasRenderFrame
,
showIframe
,
showFrame
};
},
});
</
script
>
src/layouts/page/ParentView.vue
浏览文件 @
a7a8b894
...
...
@@ -5,10 +5,24 @@
<div>
<router-view>
<template
v-slot=
"
{ Component, route }">
<keep-alive
v-if=
"openCache"
:include=
"getCaches"
>
<component
:is=
"Component"
:key=
"route.fullPath"
/>
</keep-alive>
<component
v-else
:is=
"Component"
:key=
"route.fullPath"
/>
<transition
:name=
"
getTransitionName(
{
route,
openCache: openCache,
enableTransition: getEnableTransition,
cacheTabs: getCaches,
def: getBasicTransition,
})
"
mode="out-in"
appear
>
<keep-alive
v-if=
"openCache"
:include=
"getCaches"
>
<component
:is=
"Component"
:key=
"route.fullPath"
/>
</keep-alive>
<component
v-else
:is=
"Component"
:key=
"route.fullPath"
/>
</transition>
</
template
>
</router-view>
</div>
...
...
@@ -21,6 +35,7 @@
import
{
useTransitionSetting
}
from
'
/@/hooks/setting/useTransitionSetting
'
;
import
{
useCache
}
from
'
./useCache
'
;
import
{
getTransitionName
}
from
'
./transition
'
;
export
default
defineComponent
({
parentView
:
true
,
...
...
@@ -40,6 +55,7 @@
getBasicTransition
,
openCache
,
getEnableTransition
,
getTransitionName
,
};
},
});
...
...
src/layouts/page/index.tsx
浏览文件 @
a7a8b894
import
type
{
FunctionalComponent
}
from
'
vue
'
;
import
type
{
DefaultContext
}
from
'
./transition
'
;
import
{
computed
,
defineComponent
,
unref
,
Transition
,
KeepAlive
}
from
'
vue
'
;
import
{
RouterView
,
RouteLocation
}
from
'
vue-router
'
;
...
...
@@ -10,6 +11,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import
{
useTransitionSetting
}
from
'
/@/hooks/setting/useTransitionSetting
'
;
import
{
useCache
}
from
'
./useCache
'
;
import
{
useMultipleTabSetting
}
from
'
/@/hooks/setting/useMultipleTabSetting
'
;
import
{
getTransitionName
}
from
'
./transition
'
;
// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
interface
DefaultContext
{
...
...
@@ -32,17 +34,20 @@ export default defineComponent({
return
()
=>
{
return
(
<
div
>
<>
<
RouterView
>
{
{
default
:
({
Component
,
route
}:
DefaultContext
)
=>
{
// No longer show animations that are already in the tab
const
cacheTabs
=
unref
(
getCaches
);
const
isInCache
=
cacheTabs
.
includes
(
route
.
name
as
string
);
const
name
=
isInCache
&&
route
.
meta
.
loaded
&&
unref
(
getEnableTransition
)
?
'
fade-slide
'
:
null
;
const
name
=
getTransitionName
({
route
,
openCache
:
unref
(
openCache
),
enableTransition
:
unref
(
getEnableTransition
),
cacheTabs
,
def
:
unref
(
getBasicTransition
),
});
// When the child element is the parentView, adding the key will cause the component to be executed multiple times. When it is not parentView, you need to add a key, because it needs to be compatible with the same route carrying different parameters
const
isParentView
=
Component
?.
type
.
parentView
;
...
...
@@ -60,11 +65,7 @@ export default defineComponent({
return
PageContent
;
}
return
(
<
Transition
name
=
{
name
||
route
.
meta
.
transitionName
||
unref
(
getBasicTransition
)
}
mode
=
"out-in"
appear
=
{
true
}
>
<
Transition
name
=
{
name
}
mode
=
"out-in"
appear
=
{
true
}
>
{
()
=>
PageContent
}
</
Transition
>
);
...
...
@@ -72,7 +73,7 @@ export default defineComponent({
}
}
</
RouterView
>
{
unref
(
getCanEmbedIFramePage
)
&&
<
FrameLayout
/>
}
</
div
>
</>
);
};
},
...
...
src/layouts/page/transition.ts
0 → 100644
浏览文件 @
a7a8b894
import
type
{
FunctionalComponent
}
from
'
vue
'
;
import
type
{
RouteLocation
}
from
'
vue-router
'
;
export
interface
DefaultContext
{
Component
:
FunctionalComponent
&
{
type
:
Indexable
};
route
:
RouteLocation
;
}
export
function
getTransitionName
({
route
,
openCache
,
cacheTabs
,
enableTransition
,
def
,
}:
Pick
<
DefaultContext
,
'
route
'
>
&
{
enableTransition
:
boolean
;
openCache
:
boolean
;
def
:
string
;
cacheTabs
:
string
[];
})
{
const
isInCache
=
cacheTabs
.
includes
(
route
.
name
as
string
);
const
transitionName
=
'
fade-slide
'
;
let
name
:
string
|
null
=
transitionName
;
if
(
openCache
)
{
name
=
isInCache
&&
route
.
meta
.
loaded
&&
enableTransition
?
transitionName
:
null
;
}
return
name
||
route
.
meta
.
transitionName
||
def
;
}
src/router/guard/index.ts
浏览文件 @
a7a8b894
...
...
@@ -11,11 +11,11 @@ import { createPageGuard } from './pageGuard';
export
function
createGuard
(
router
:
Router
)
{
createPageGuard
(
router
);
createPageLoadingGuard
(
router
);
createHttpGuard
(
router
);
createScrollGuard
(
router
);
createMessageGuard
(
router
);
createTitleGuard
(
router
);
createPageLoadingGuard
(
router
);
createProgressGuard
(
router
);
createPermissionGuard
(
router
);
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录