fix: auto close popup on deactivated (#6368)

* 修复挂载到内容区域的弹窗和抽屉被意外关闭的问题
This commit is contained in:
Netfan
2025-06-11 12:20:52 +08:00
committed by GitHub
parent 8ba7bdf2bd
commit c0962fec18
4 changed files with 40 additions and 18 deletions

View File

@@ -1,7 +1,15 @@
<script lang="ts" setup>
import type { DrawerProps, ExtendedDrawerApi } from './drawer';
import { computed, provide, ref, unref, useId, watch } from 'vue';
import {
computed,
onDeactivated,
provide,
ref,
unref,
useId,
watch,
} from 'vue';
import {
useIsMobile,
@@ -94,6 +102,16 @@ const {
// },
// );
/**
* 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
*/
onDeactivated(() => {
// 如果弹窗没有被挂载到内容区域,则关闭弹窗
if (!appendToMain.value) {
props.drawerApi?.close();
}
});
function interactOutside(e: Event) {
if (!closeOnClickModal.value || submitting.value) {
e.preventDefault();

View File

@@ -9,7 +9,6 @@ import {
h,
inject,
nextTick,
onDeactivated,
provide,
reactive,
ref,
@@ -72,13 +71,6 @@ export function useVbenDrawer<
},
);
/**
* 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
*/
onDeactivated(() => {
(extendedApi as ExtendedDrawerApi)?.close?.();
});
return [Drawer, extendedApi as ExtendedDrawerApi] as const;
}