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