fix(use-loading): rendering fails when used with onMounted, fix #438

CHANGELOG.zh_CN.md

@@ -19,6 +19,7 @@
 - 修复 tinymce 上传按钮全屏模式下消失问题
 - 确保 title 在重新登录后正常改变
 - 确保后台模式登录正常
+- 修复 TableAction 点击事件问题
 
 ## 2.1.1 (2021-03-26)
 

build/vite/plugin/theme.ts

@@ -19,7 +19,6 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
     mixLighten,
     tinycolor,
   });
-
   const plugin = [
     viteThemePlugin({
       resolveSelector: (s) => `[data-theme] ${s}`,
@@ -41,7 +40,8 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
         // black: '#0e1117',
         // #8b949e
         'text-color-secondary': '#8b949e',
-        'border-color-base': '#30363d',
+        // 'border-color-base': '#30363d',
+        // 'border-color-split': '#30363d',
         'item-active-bg': '#111b26',
       },
     }),

src/components/Loading/src/createLoading.ts

@@ -4,7 +4,7 @@ import type { LoadingProps } from './types';
 import { createVNode, render, reactive, h } from 'vue';
 import Loading from './index.vue';
 
-export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElement) {
+export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElement, wait = false) {
   let vm: Nullable<VNode> = null;
   const data = reactive({
     tip: '',
@@ -13,16 +13,21 @@ export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElemen
   });
 
   const LoadingWrap = defineComponent({
-    setup() {
-      return () => {
-        return h(Loading, { ...data });
-      };
+    render() {
+      return h(Loading, { ...data });
     },
   });
 
   vm = createVNode(LoadingWrap);
 
-  render(vm, document.createElement('div'));
+  // TODO fix https://github.com/anncwb/vue-vben-admin/issues/438
+  if (wait) {
+    setTimeout(() => {
+      render(vm, document.createElement('div'));
+    }, 0);
+  } else {
+    render(vm, document.createElement('div'));
+  }
 
   function close() {
     if (vm?.el && vm.el.parentNode) {

src/components/Loading/src/useLoading.ts

@@ -27,7 +27,7 @@ export function useLoading(opt: Partial<LoadingProps> | Partial<UseLoadingOption
     props = opt as Partial<LoadingProps>;
   }
 
-  const instance = createLoading(props);
+  const instance = createLoading(props, undefined, true);
 
   const open = (): void => {
     const t = unref(target);

src/design/theme.less

@@ -18,6 +18,11 @@ html[data-theme='dark'] {
       0 9px 28px 8px rgb(0 0 0 / 20%);
   }
 
+  .ant-card-grid {
+    box-shadow: 1px 0 0 0 #434343, 0 1px 0 0 #434343, 1px 1px 0 0 #434343, 1px 0 0 0 #434343 inset,
+      0 1px 0 0 #434343 inset;
+  }
+
   .ant-alert-message,
   .ant-alert-with-description .ant-alert-message,
   .ant-alert-description {

src/views/demo/comp/loading/index.vue

@@ -1,21 +1,25 @@
 <template>
   <PageWrapper v-loading="loadingRef" loading-tip="加载中..." title="Loading组件示例">
-    <a-alert message="组件方式" />
-    <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">
-      全屏 Loading
-    </a-button>
-    <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
-    <Loading :loading="loading" :absolute="absolute" :tip="tip" />
+    <div ref="wrapEl">
+      <a-alert message="组件方式" />
+      <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">
+        全屏 Loading
+      </a-button>
+      <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
+      <Loading :loading="loading" :absolute="absolute" :tip="tip" />
 
-    <a-alert message="函数方式" />
+      <a-alert message="函数方式" />
 
-    <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading"> 全屏 Loading </a-button>
-    <a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>
+      <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading">
+        全屏 Loading
+      </a-button>
+      <a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>
 
-    <a-alert message="指令方式" />
-    <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading">
-      打开指令Loading
-    </a-button>
+      <a-alert message="指令方式" />
+      <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading">
+        打开指令Loading
+      </a-button>
+    </div>
   </PageWrapper>
 </template>
 <script lang="ts">