fix: 修复编程式 Dialog 遮罩层关闭的问题

nonhana · Nov 25, 2024 · f0c6867 · f0c6867
1 parent 0dbacf6
commit f0c6867
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 37 deletions.
diff --git a/components/hana/Dialog/index.vue b/components/hana/Dialog/index.vue
@@ -15,16 +15,10 @@ const emits = defineEmits<{
   (e: 'ok'): void
   (e: 'cancel'): void
   (e: 'destroy'): void
-  (e: 'removeOverlay'): void
   (e: 'update:modelValue', value: boolean): void
 }>()
 
 const programmaticVisible = ref(false)
-watch(programmaticVisible, (newV) => {
-  if (!newV) {
-    emits('removeOverlay')
-  }
-})
 const visible = computed(() => props.programmatic ? programmaticVisible.value : props.modelValue)
 
 onMounted(() => {
@@ -55,6 +49,20 @@ function handleAfterLeave() {
   emits('destroy')
 }
 
+const overlayRef = ref<HTMLDivElement | null>(null)
+watch(visible, (newV) => {
+  if (overlayRef.value) {
+    if (newV) {
+      requestAnimationFrame(() => {
+        overlayRef.value!.style.opacity = String(props.overlayOpacity)
+      })
+    }
+    else {
+      overlayRef.value!.style.opacity = '0'
+    }
+  }
+})
+
 defineExpose({
   handleClose,
 })
@@ -109,10 +117,9 @@ defineExpose({
     </div>
   </transition>
   <div
-    v-if="!programmatic"
-    class="fixed inset-0 z-40 bg-black transition-opacity duration-300"
+    ref="overlayRef"
+    class="fixed inset-0 z-40 bg-black opacity-0 transition-opacity duration-300"
     :class="{ 'pointer-events-none': !visible }"
-    :style="{ opacity: visible ? overlayOpacity : 0 }"
     @click="handleClose"
   />
 </template>
diff --git a/components/hana/Dialog/useDialog.ts b/components/hana/Dialog/useDialog.ts
@@ -28,39 +28,12 @@ interface DialogProgrammaticOptions {
 export type DialogOptions = DialogDeclarativeOptions & DialogProgrammaticOptions & { programmatic?: boolean }
 
 export default function useDialog() {
-  // 编程式调用 Dialog 手动管理遮罩层以正确触发过渡效果
-  function createOverlay(overlayOpacity: number = 0.5) {
-    const overlay = document.createElement('div')
-    overlay.className = 'fixed inset-0 z-40 bg-black transition-opacity duration-300'
-    overlay.style.opacity = '0'
-    document.body.appendChild(overlay)
-
-    requestAnimationFrame(() => {
-      overlay.style.opacity = String(overlayOpacity)
-    })
-
-    const removeOverlay = () => {
-      overlay.style.opacity = '0'
-      setTimeout(() => {
-        document.body.removeChild(overlay)
-      }, 300)
-    }
-
-    overlay.addEventListener('click', () => {
-      removeOverlay()
-    })
-    return { removeOverlay }
-  }
-
   // 编程式调用 Dialog
   const callHanaDialog = (options: DialogOptions) => {
     // 创建容器
     const container = document.createElement('div')
     document.body.appendChild(container)
 
-    // 创建遮罩层
-    const { removeOverlay } = createOverlay(options.overlayOpacity)
-
     // 挂载 VNode
     const dialogVNode = createVNode(Dialog, {
       ...options,
@@ -85,7 +58,6 @@ export default function useDialog() {
         render(null, container)
         document.body.removeChild(container)
       },
-      onRemoveOverlay: removeOverlay,
     })
 
     render(dialogVNode, container)