feat: PageLoading Component

examples/layouts/BasicLayout.vue

@@ -4,6 +4,7 @@
     v-model:selectedKeys="baseState.selectedKeys"
     v-model:openKeys="baseState.openKeys"
     v-bind="state"
+    :loading="loading"
   >
     <template #collapsedButtonRender>
       <a-button>abc</a-button>
@@ -26,6 +27,7 @@
             un-checked-children="OFF"
           />
         </span>
+        <a-button @click="handlePageLoadingClick">Page Loading</a-button>
         <a-select v-model:value="state.navTheme" style="width: 100px">
           <a-select-option value="light">Light</a-select-option>
           <a-select-option value="dark">Dark</a-select-option>
@@ -41,7 +43,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, watchEffect } from 'vue';
+import { defineComponent, reactive, ref, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
 import { Button, Switch, Select, Space } from 'ant-design-vue';
 import { getMenuData, clearMenuItem, FooterToolbar } from '@ant-design-vue/pro-layout';
@@ -60,6 +62,8 @@ export default defineComponent({
     [Space.name]: Space,
   },
   setup() {
+    const loading = ref(false);
+
     const router = useRouter();
     const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
 
@@ -84,10 +88,20 @@ export default defineComponent({
         baseState.selectedKeys = router.currentRoute.value.matched.concat().map(r => r.path);
       }
     });
+
+    function handlePageLoadingClick() {
+      loading.value = true;
+      setTimeout(() => {
+        loading.value = false;
+      }, 2000);
+    }
+
     return {
       i18n,
       baseState,
       state,
+      loading,
+      handlePageLoadingClick,
     };
   },
 });

src/BasicLayout.tsx

@@ -19,6 +19,7 @@ import { getPropsSlot, PropTypes } from './utils';
 import type { CustomRender, FormatMessage, WithFalse } from './typings';
 
 import './BasicLayout.less';
+import PageLoading from '@/PageLoading';
 
 export const basicLayoutProps = {
   ...defaultSettingProps,
@@ -240,7 +241,7 @@ const ProLayout = defineComponent({
                   isChildrenLayout={props.isChildrenLayout}
                   style={props.disableContentMargin ? undefined : props.contentStyle}
                 >
-                  {slots.default?.()}
+                  {props.loading ? <PageLoading /> : slots.default?.()}
                 </WrapContent>
                 {footerRender && footerRender(props)}
               </Layout>

src/PageLoading/index.tsx

+import { defineComponent, h } from 'vue';
+import { Spin, SpinProps } from 'ant-design-vue';
+import { getSpinProps } from 'ant-design-vue/es/spin/Spin';
+
+export type PageLoadingProps = SpinProps;
+
+const PageLoading = defineComponent({
+  name: 'PageLoading',
+  props: {
+    ...getSpinProps(),
+  },
+  render() {
+    return h(
+      'div',
+      { style: { paddingTop: '100px', textAlign: 'center' } },
+      h(Spin, { ...this.$props }),
+    );
+  },
+});
+
+export default PageLoading;

src/index.ts

@@ -27,3 +27,5 @@ export type { WaterMarkProps } from './WaterMark';
 export { default } from './BasicLayout';
 // export { default as ProLayout } from './BasicLayout';
 export type { BasicLayoutProps } from './BasicLayout';
+
+export { default as PageLoading } from './Pageloading';