mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-28 05:39:34 +08:00
refactor: add loading component and demo
This commit is contained in:
@@ -14,10 +14,6 @@
|
||||
position: absolute;
|
||||
z-index: @page-loading-z-index;
|
||||
|
||||
&.fill {
|
||||
background: rgba(240, 242, 245) !important;
|
||||
}
|
||||
|
||||
> .basic-loading {
|
||||
margin-bottom: 15%;
|
||||
}
|
||||
|
@@ -1,31 +1,25 @@
|
||||
import './index.less';
|
||||
|
||||
import { defineComponent, unref, computed } from 'vue';
|
||||
import { FullLoading } from '/@/components/Loading/index';
|
||||
import { defineComponent, unref } from 'vue';
|
||||
import { Loading } from '/@/components/Loading';
|
||||
|
||||
import { RouterView } from 'vue-router';
|
||||
|
||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
|
||||
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LayoutContent',
|
||||
setup() {
|
||||
const { getOpenPageLoading } = useTransitionSetting();
|
||||
const { getShowMultipleTab } = useMultipleTabSetting();
|
||||
const { getLayoutContentMode, getPageLoading } = useRootSetting();
|
||||
|
||||
const getLoadingClass = computed(() => {
|
||||
return [
|
||||
`layout-content__loading`,
|
||||
{ fill: unref(getShowMultipleTab), hidden: !unref(getPageLoading) },
|
||||
];
|
||||
});
|
||||
return () => {
|
||||
return (
|
||||
<div class={['layout-content', unref(getLayoutContentMode)]}>
|
||||
{unref(getOpenPageLoading) && <FullLoading class={unref(getLoadingClass)} />}
|
||||
{unref(getOpenPageLoading) && (
|
||||
<Loading loading={unref(getPageLoading)} absolute class="layout-content__loading" />
|
||||
)}
|
||||
<RouterView />
|
||||
</div>
|
||||
);
|
||||
|
@@ -22,6 +22,7 @@ export default defineComponent({
|
||||
name: 'PageLayout',
|
||||
setup() {
|
||||
const { getShowMenu } = useMenuSetting();
|
||||
|
||||
const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
|
||||
|
||||
const { getBasicTransition, getEnableTransition } = useTransitionSetting();
|
||||
|
Reference in New Issue
Block a user