feat: fixed useScrollLock() can not be unlock

This commit is contained in:
Harold Zhang
2026-06-15 16:34:53 +08:00
parent 6b109c9ae6
commit 16ebc67796
2 changed files with 41 additions and 12 deletions

View File

@@ -5,7 +5,6 @@ import type { ClassType } from '@vben-core/typings';
import { ref } from 'vue';
import { useScrollLock } from '@vben-core/composables';
import { cn } from '@vben-core/shared/utils';
import { reactiveOmit } from '@vueuse/core';
@@ -15,6 +14,8 @@ import {
useForwardPropsEmits,
} from 'reka-ui';
import AlertDialogOverlay from './AlertDialogOverlay.vue';
defineOptions({
inheritAttrs: false,
});
@@ -38,8 +39,9 @@ const emits = defineEmits<
// reka-ui 的 AlertDialog 在 modal=true 时会将 body 设置 pointer-events:none
// 弹出层(如 Select 下拉框)会因此无法点击。这里通过在上层传入 :modal="false" 来
// 避免该问题,同时自行渲染遮罩并锁定滚动。
useScrollLock();
// 避免该问题,同时通过 AlertDialogOverlay 组件自行渲染遮罩并锁定滚动。
// AlertDialogOverlay 通过 v-if 控制挂载/卸载,其内部的 useScrollLock 会在组件
// 卸载时自动解锁滚动。
const delegatedProps = reactiveOmit(props, 'class');
@@ -64,17 +66,13 @@ defineExpose({
<template>
<AlertDialogPortal>
<Transition name="fade" appear>
<div
<AlertDialogOverlay
v-if="open && modal"
class="fixed inset-0 z-popup bg-overlay"
:style="{
...(zIndex ? { zIndex } : {}),
position: 'fixed',
backdropFilter:
overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
}"
:overlay-blur="overlayBlur"
position="fixed"
:z-index="zIndex"
@click="() => emits('close')"
></div>
/>
</Transition>
<AlertDialogContent
data-slot="alert-dialog-content"

View File

@@ -0,0 +1,31 @@
<script setup lang="ts">
import { useScrollLock } from '@vben-core/composables';
import { cn } from '@vben-core/shared/utils';
const props = withDefaults(
defineProps<{
class?: any;
overlayBlur?: number;
position?: 'absolute' | 'fixed';
zIndex?: number;
}>(),
{
position: 'fixed',
},
);
// 通过 v-if 控制挂载/卸载,组件卸载时 useScrollLock 自动解锁滚动
useScrollLock();
</script>
<template>
<div
:style="{
...(zIndex ? { zIndex } : {}),
position,
backdropFilter:
overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
}"
:class="cn('z-popup bg-overlay inset-0 fixed', props.class)"
></div>
</template>