Bladeren bron

✨ feat(dialog): add backdrop click to close dialog

- add backdrop click handler to close dialog when clicking outside
- add content click handler to prevent event propagation
- remove unused Taro and useState imports to clean up code
yourname 3 maanden geleden
bovenliggende
commit
9ab480e7a4
1 gewijzigde bestanden met toevoegingen van 18 en 4 verwijderingen
  1. 18 4
      mini/src/components/ui/dialog.tsx

+ 18 - 4
mini/src/components/ui/dialog.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect } from 'react'
+import { useEffect } from 'react'
 import { View, Text } from '@tarojs/components'
-import Taro from '@tarojs/taro'
 import { cn } from '@/utils/cn'
 
 interface DialogProps {
@@ -17,11 +16,26 @@ export function Dialog({ open, onOpenChange, children }: DialogProps) {
     }
   }, [open])
 
+  const handleBackdropClick = () => {
+    onOpenChange(false)
+  }
+
+  const handleContentClick = (e: any) => {
+    // 阻止事件冒泡,避免点击内容区域时关闭弹窗
+    e.stopPropagation()
+  }
+
   if (!open) return null
 
   return (
-    <View className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <View className="relative bg-white rounded-lg shadow-lg max-w-md w-full mx-4">
+    <View
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={handleBackdropClick}
+    >
+      <View
+        className="relative bg-white rounded-lg shadow-lg max-w-md w-full mx-4"
+        onClick={handleContentClick}
+      >
         {children}
       </View>
     </View>