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 30009a64..89cd3b5f 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
@@ -52,6 +52,10 @@ export interface DrawerProps {
* 弹窗描述
*/
description?: string;
+ /**
+ * 在关闭时销毁抽屉
+ */
+ destroyOnClose?: boolean;
/**
* 是否显示底部
* @default true
@@ -143,10 +147,6 @@ export interface DrawerApiOptions extends DrawerState {
* 独立的抽屉组件
*/
connectedComponent?: Component;
- /**
- * 在关闭时销毁抽屉。仅在使用 connectedComponent 时有效
- */
- destroyOnClose?: boolean;
/**
* 关闭前的回调,返回 false 可以阻止关闭
* @returns
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index b5535ba4..7a28dddd 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -1,7 +1,7 @@
{
cn('flex w-[520px] flex-col', drawerClass, {
'!w-full': isMobile || placement === 'bottom' || placement === 'top',
'max-h-[100vh]': placement === 'bottom' || placement === 'top',
+ hidden: isClosed,
})
"
:modal="modal"
:open="state?.isOpen"
:side="placement"
:z-index="zIndex"
+ :force-mount="getForceMount"
:overlay-blur="overlayBlur"
@close-auto-focus="handleFocusOutside"
- @closed="() => drawerApi?.onClosed()"
+ @closed="handleClosed"
@escape-key-down="escapeKeyDown"
@focus-outside="handleFocusOutside"
@interact-outside="interactOutside"
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 21b11c56..59bccbd8 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
@@ -21,7 +21,9 @@ import VbenDrawer from './drawer.vue';
const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');
-const DEFAULT_DRAWER_PROPS: Partial = {};
+const DEFAULT_DRAWER_PROPS: Partial = {
+ destroyOnClose: true,
+};
export function setDefaultDrawerProps(props: Partial) {
Object.assign(DEFAULT_DRAWER_PROPS, props);
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 61965a02..e2c709d0 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
@@ -17,7 +17,9 @@ import VbenModal from './modal.vue';
const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');
-const DEFAULT_MODAL_PROPS: Partial = {};
+const DEFAULT_MODAL_PROPS: Partial = {
+ destroyOnClose: true,
+};
export function setDefaultModalProps(props: Partial) {
Object.assign(DEFAULT_MODAL_PROPS, props);
@@ -86,7 +88,7 @@ export function useVbenModal(
mergedOptions.onClosed = () => {
options.onClosed?.();
- if (options.destroyOnClose) {
+ if (mergedOptions.destroyOnClose) {
injectData.reCreateModal?.();
}
};
diff --git a/playground/src/views/examples/drawer/in-content-demo.vue b/playground/src/views/examples/drawer/in-content-demo.vue
index 8cd6f7e7..f67b9785 100644
--- a/playground/src/views/examples/drawer/in-content-demo.vue
+++ b/playground/src/views/examples/drawer/in-content-demo.vue
@@ -5,9 +5,27 @@ import { useVbenDrawer } from '@vben/common-ui';
import { Input, message } from 'ant-design-vue';
+import { useVbenForm } from '#/adapter/form';
+
const value = ref('');
+const [Form] = useVbenForm({
+ schema: [
+ {
+ component: 'Input',
+ componentProps: {
+ placeholder: 'KeepAlive测试:内部组件',
+ },
+ fieldName: 'field1',
+ hideLabel: true,
+ label: '字段1',
+ },
+ ],
+ showDefaultActions: false,
+});
+
const [Drawer, drawerApi] = useVbenDrawer({
+ destroyOnClose: false,
onCancel() {
drawerApi.close();
},
@@ -20,7 +38,11 @@ const [Drawer, drawerApi] = useVbenDrawer({
extra
- 本抽屉指定在内容区域打开
-
+ 此弹窗指定在内容区域打开,并且在关闭之后弹窗内容不会被销毁
+
+