diff --git a/src/components/Loading/src/createLoading.ts b/src/components/Loading/src/createLoading.ts index b91db1fd..6402ad9a 100644 --- a/src/components/Loading/src/createLoading.ts +++ b/src/components/Loading/src/createLoading.ts @@ -19,13 +19,14 @@ export function createLoading(props?: Partial, target?: HTMLElemen vm = createVNode(LoadingWrap); + let container: Nullable = null; if (wait) { // TODO fix https://github.com/anncwb/vue-vben-admin/issues/438 setTimeout(() => { - render(vm, document.createElement('div')); + container && render(vm, (container = document.createElement('div'))); }, 0); } else { - render(vm, document.createElement('div')); + render(vm, (container = document.createElement('div'))); } function close() { @@ -41,6 +42,11 @@ export function createLoading(props?: Partial, target?: HTMLElemen target.appendChild(vm.el as HTMLElement); } + function destory() { + container && render(null, container); + container = vm = null; + } + if (target) { open(target); } @@ -48,6 +54,7 @@ export function createLoading(props?: Partial, target?: HTMLElemen vm, close, open, + destory, setTip: (tip: string) => { data.tip = tip; }, diff --git a/src/components/Loading/src/useLoading.ts b/src/components/Loading/src/useLoading.ts index 356df7de..910e084e 100644 --- a/src/components/Loading/src/useLoading.ts +++ b/src/components/Loading/src/useLoading.ts @@ -1,7 +1,8 @@ import { unref } from 'vue'; +import type { Ref } from 'vue'; +import { tryOnUnmounted } from '@vueuse/core'; import { createLoading } from './createLoading'; import type { LoadingProps } from './typing'; -import type { Ref } from 'vue'; export interface UseLoadingOptions { target?: any; @@ -45,5 +46,9 @@ export function useLoading( instance.setTip(tip); }; + tryOnUnmounted(() => { + instance.destory(); + }); + return [open, close, setTip]; } diff --git a/src/directives/loading.ts b/src/directives/loading.ts index dadb5b7d..242816b5 100644 --- a/src/directives/loading.ts +++ b/src/directives/loading.ts @@ -28,7 +28,7 @@ const loadingDirective: Directive = { } }, unmounted(el) { - el?.instance?.close(); + el?.instance?.destory(); }, };