diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts index f4c92006e..88a0c147b 100644 --- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts +++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts @@ -126,9 +126,13 @@ export type ExtendedDrawerApi = { export interface DrawerApiOptions extends DrawerState { /** - * 独立的弹窗组件 + * 独立的抽屉组件 */ connectedComponent?: Component; + /** + * 在关闭时销毁抽屉。仅在使用 connectedComponent 时有效 + */ + destroyOnClose?: boolean; /** * 关闭前的回调,返回 false 可以阻止关闭 * @returns diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts b/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts index c3ff263b0..ad8c58cdd 100644 --- a/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts +++ b/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts @@ -4,7 +4,15 @@ import type { ExtendedDrawerApi, } from './drawer'; -import { defineComponent, h, inject, nextTick, provide, reactive } from 'vue'; +import { + defineComponent, + h, + inject, + nextTick, + provide, + reactive, + ref, +} from 'vue'; import { useStore } from '@vben-core/shared/store'; @@ -22,6 +30,7 @@ export function useVbenDrawer< const { connectedComponent } = options; if (connectedComponent) { const extendedApi = reactive({}); + const isDrawerReady = ref(true); const Drawer = defineComponent( (props: TParentDrawerProps, { attrs, slots }) => { provide(USER_DRAWER_INJECT_KEY, { @@ -31,13 +40,23 @@ export function useVbenDrawer< Object.setPrototypeOf(extendedApi, api); }, options, + async reCreateDrawer() { + isDrawerReady.value = false; + await nextTick(); + isDrawerReady.value = true; + }, }); checkProps(extendedApi as ExtendedDrawerApi, { ...props, ...attrs, ...slots, }); - return () => h(connectedComponent, { ...props, ...attrs }, slots); + return () => + h( + isDrawerReady.value ? connectedComponent : 'div', + { ...props, ...attrs }, + slots, + ); }, { inheritAttrs: false, @@ -58,6 +77,14 @@ export function useVbenDrawer< options.onOpenChange?.(isOpen); injectData.options?.onOpenChange?.(isOpen); }; + + const onClosed = mergedOptions.onClosed; + mergedOptions.onClosed = () => { + onClosed?.(); + if (mergedOptions.destroyOnClose) { + injectData.reCreateDrawer?.(); + } + }; const api = new DrawerApi(mergedOptions); const extendedApi: ExtendedDrawerApi = api as never; diff --git a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts index 362a6f056..aebdf9454 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts +++ b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts @@ -77,9 +77,11 @@ export function useVbenModal( injectData.options?.onOpenChange?.(isOpen); }; + const onClosed = mergedOptions.onClosed; + mergedOptions.onClosed = () => { - options.onClosed?.(); - if (options.destroyOnClose) { + onClosed?.(); + if (mergedOptions.destroyOnClose) { injectData.reCreateModal?.(); } };