FaDrawer/FaModal开启遮罩层时禁用全局滚动

src/ui/components/FaDrawer/sheet/SheetContent.vue

@@ -3,11 +3,11 @@ import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import type { SheetVariants } from '.'
 import { cn } from '@/utils'
+import { useScrollLock } from '@vueuse/core'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
-
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
@@ -41,6 +41,17 @@ const delegatedProps = computed(() => {
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
+const showOverlay = computed(() => props.open && props.overlay)
+const isLocked = useScrollLock(document.body)
+watch(showOverlay, (val) => {
+  if (val) {
+    isLocked.value = true
+  }
+  else {
+    isLocked.value = false
+  }
+})
+
 const id = inject('DrawerId')
 </script>
 
@@ -58,7 +69,7 @@ const id = inject('DrawerId')
       :appear="true"
     >
       <div
-        v-if="props.open && props.overlay"
+        v-if="showOverlay"
         :data-drawer-id="id"
         :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,

src/ui/components/FaDrawer/sheet/index.ts

@@ -14,12 +14,12 @@ export const sheetVariants = cva(
   {
     variants: {
       side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        top: 'inset-x-0 top-0 shadow-[0_1px_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
-            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md',
+            'inset-x-0 bottom-0 shadow-[0_-1px_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 shadow-[1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md',
         right:
-            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md',
+            'inset-y-0 right-0 h-full w-3/4 shadow-[-1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md',
       },
     },
     defaultVariants: {

src/ui/components/FaModal/dialog/DialogContent.vue

@@ -2,6 +2,7 @@
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
+import { useScrollLock } from '@vueuse/core'
 import { Maximize, Minimize, X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -44,6 +45,17 @@ defineExpose({
   el: dialogContentRef,
 })
 
+const showOverlay = computed(() => props.open && props.overlay)
+const isLocked = useScrollLock(document.body)
+watch(showOverlay, (val) => {
+  if (val) {
+    isLocked.value = true
+  }
+  else {
+    isLocked.value = false
+  }
+})
+
 const id = inject('ModalId')
 </script>
 
@@ -61,7 +73,7 @@ const id = inject('ModalId')
       :appear="true"
     >
       <div
-        v-if="props.open && props.overlay"
+        v-if="showOverlay"
         :data-modal-id="id"
         :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,