feat: drawer support destroy on close

little-alei · Jan 6, 2025 · a121671 · a121671
1 parent 97ebab2
commit a121671
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git 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
@@ -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
@@ -77,9 +77,11 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
     injectData.options?.onOpenChange?.(isOpen);
   };
 
+  const onClosed = mergedOptions.onClosed;
+
   mergedOptions.onClosed = () => {
-    options.onClosed?.();
-    if (options.destroyOnClose) {
+    onClosed?.();
+    if (mergedOptions.destroyOnClose) {
       injectData.reCreateModal?.();
     }
   };