feat: 更新 FaDrawer 和 FaModal 组件,强制关闭自带遮罩

This commit is contained in:
Hooray
2026-04-30 21:47:22 +08:00
parent 5ba6d08df3
commit fc2c89fa2d
4 changed files with 24 additions and 6 deletions
+1 -1
View File
@@ -178,7 +178,7 @@ function handleAnimationEnd() {
</script>
<template>
<Sheet :open="isOpen" @update:open="updateOpen">
<Sheet :modal="false" :open="isOpen" @update:open="updateOpen">
<SheetContent
ref="sheetContentRef"
:drawer-id="drawerId"
@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { reactiveOmit, useScrollLock } from '@vueuse/core'
import { X } from 'lucide-vue-next'
import {
DialogClose,
@@ -45,6 +45,15 @@ defineExpose({
})
const showOverlay = computed(() => props.open && props.overlay)
const isLocked = useScrollLock(document.body)
watch(showOverlay, (val) => {
if (val) {
isLocked.value = true
}
else {
isLocked.value = false
}
})
</script>
<template>
@@ -71,7 +80,7 @@ const showOverlay = computed(() => props.open && props.overlay)
}"
/>
</Transition>
<SheetOverlay class="hidden" />
<SheetOverlay />
<DialogContent
ref="sheetContentRef"
data-slot="sheet-content"
@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { reactiveOmit, useScrollLock } from '@vueuse/core'
import { Maximize, Minimize, X } from 'lucide-vue-next'
import {
DialogClose,
@@ -47,6 +47,15 @@ defineExpose({
})
const showOverlay = computed(() => props.open && props.overlay)
const isLocked = useScrollLock(document.body)
watch(showOverlay, (val) => {
if (val) {
isLocked.value = true
}
else {
isLocked.value = false
}
})
</script>
<template>
@@ -73,7 +82,7 @@ const showOverlay = computed(() => props.open && props.overlay)
}"
/>
</Transition>
<DialogOverlay class="hidden" />
<DialogOverlay />
<DialogContent
ref="dialogContentRef"
v-bind="forwarded"
+1 -1
View File
@@ -216,7 +216,7 @@ function handleAnimationEnd() {
</script>
<template>
<Dialog :open="isOpen" @update:open="updateOpen">
<Dialog :modal="false" :open="isOpen" @update:open="updateOpen">
<DialogContent
ref="dialogContentRef"
:modal-id="modalId"