refactor: add loading component and demo

This commit is contained in:
vben
2020-12-01 20:59:17 +08:00
parent c9e44ce9af
commit 5db3ce7737
38 changed files with 545 additions and 348 deletions

View File

@@ -14,10 +14,6 @@
position: absolute;
z-index: @page-loading-z-index;
&.fill {
background: rgba(240, 242, 245) !important;
}
> .basic-loading {
margin-bottom: 15%;
}

View File

@@ -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>
);

View File

@@ -22,6 +22,7 @@ export default defineComponent({
name: 'PageLayout',
setup() {
const { getShowMenu } = useMenuSetting();
const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
const { getBasicTransition, getEnableTransition } = useTransitionSetting();