feat: fixed useScrollLock() can not be unlock
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user