fix: fixed regression of confirm
This commit is contained in:
@@ -145,7 +145,7 @@ async function handleOpenChange(val: boolean) {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<AlertDialog :open="open" @update:open="handleOpenChange">
|
<AlertDialog :modal="false" :open="open" @update:open="handleOpenChange">
|
||||||
<AlertDialogContent
|
<AlertDialogContent
|
||||||
:open="open"
|
:open="open"
|
||||||
:centered="centered"
|
:centered="centered"
|
||||||
@@ -153,6 +153,7 @@ async function handleOpenChange(val: boolean) {
|
|||||||
@opened="emits('opened')"
|
@opened="emits('opened')"
|
||||||
@closed="onAlertClosed"
|
@closed="onAlertClosed"
|
||||||
@escape-key-down="onEscapeKeyDown($event)"
|
@escape-key-down="onEscapeKeyDown($event)"
|
||||||
|
@close="handleOpenChange(false)"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
containerClass,
|
containerClass,
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ import { cn } from '@vben-core/shared/utils';
|
|||||||
import { reactiveOmit } from '@vueuse/core';
|
import { reactiveOmit } from '@vueuse/core';
|
||||||
import {
|
import {
|
||||||
AlertDialogContent,
|
AlertDialogContent,
|
||||||
AlertDialogOverlay,
|
|
||||||
AlertDialogPortal,
|
AlertDialogPortal,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'reka-ui';
|
} from 'reka-ui';
|
||||||
@@ -37,6 +36,9 @@ const emits = defineEmits<
|
|||||||
AlertDialogContentEmits & { close: []; closed: []; opened: [] }
|
AlertDialogContentEmits & { close: []; closed: []; opened: [] }
|
||||||
>();
|
>();
|
||||||
|
|
||||||
|
// reka-ui 的 AlertDialog 在 modal=true 时会将 body 设置 pointer-events:none,
|
||||||
|
// 弹出层(如 Select 下拉框)会因此无法点击。这里通过在上层传入 :modal="false" 来
|
||||||
|
// 避免该问题,同时自行渲染遮罩并锁定滚动。
|
||||||
useScrollLock();
|
useScrollLock();
|
||||||
|
|
||||||
const delegatedProps = reactiveOmit(props, 'class');
|
const delegatedProps = reactiveOmit(props, 'class');
|
||||||
@@ -62,10 +64,9 @@ defineExpose({
|
|||||||
<template>
|
<template>
|
||||||
<AlertDialogPortal>
|
<AlertDialogPortal>
|
||||||
<Transition name="fade" appear>
|
<Transition name="fade" appear>
|
||||||
<AlertDialogOverlay
|
<div
|
||||||
data-slot="alert-dialog-overlay"
|
|
||||||
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-popup bg-overlay"
|
|
||||||
v-if="open && modal"
|
v-if="open && modal"
|
||||||
|
class="fixed inset-0 z-popup bg-overlay"
|
||||||
:style="{
|
:style="{
|
||||||
...(zIndex ? { zIndex } : {}),
|
...(zIndex ? { zIndex } : {}),
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
@@ -73,7 +74,7 @@ defineExpose({
|
|||||||
overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
|
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"
|
||||||
|
|||||||
Reference in New Issue
Block a user