mirror of
https://github.com/fantastic-admin/basic.git
synced 2026-10-06 15:13:34 +08:00
feat: 更新 FaDrawer 和 FaModal 组件,强制关闭自带遮罩
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user