fix(Dialog): 修复在弹窗内按下鼠标,在蒙层中松开会关闭弹窗的问题 (#1739)

Tencent · Sep 26, 2022 · 75944c6 · 75944c6
1 parent 71313d2
commit 75944c6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
@@ -22,7 +22,7 @@ import TransferDom from '../utils/transfer-dom';
 import { addClass, removeClass } from '../utils/dom';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
 import { useConfig, usePrefixClass } from '../hooks/useConfig';
-import { useAction } from './hooks';
+import { useAction, useSameTarget } from './hooks';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
 import useDestroyOnClose from '../hooks/useDestroyOnClose';
 import { stack } from './stack';
@@ -110,7 +110,6 @@ export default defineComponent({
     const renderContent = useContent();
     const renderTNodeJSX = useTNodeJSX();
     const dialogEle = ref<HTMLElement | null>(null);
-    const dialogPosition = ref<HTMLElement | null>(null);
     const { globalConfig } = useConfig('dialog');
     const { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon } = useGlobalIcon({
       CloseIcon: TdCloseIcon,
@@ -237,12 +236,11 @@ export default defineComponent({
     };
     const overlayAction = (e: MouseEvent) => {
       if (props.showOverlay && (props.closeOnOverlayClick ?? globalConfig.value.closeOnOverlayClick)) {
-        if (e.target === dialogPosition.value) {
-          props.onOverlayClick?.({ e });
-          emitCloseEvent({ e, trigger: 'overlay' });
-        }
+        props.onOverlayClick?.({ e });
+        emitCloseEvent({ e, trigger: 'overlay' });
       }
     };
+    const { onClick, onMousedown, onMouseup } = useSameTarget(overlayAction);
     const closeBtnAction = (e: MouseEvent) => {
       props.onCloseBtnClick?.({ e });
       emitCloseEvent({
@@ -320,7 +318,13 @@ export default defineComponent({
       return (
         // /* 非模态形态下draggable为true才允许拖拽 */
         <div class={wrapClass.value}>
-          <div class={positionClass.value} style={positionStyle.value} onClick={overlayAction} ref={dialogPosition}>
+          <div
+            class={positionClass.value}
+            style={positionStyle.value}
+            onClick={onClick}
+            onMousedown={onMousedown}
+            onMouseup={onMouseup}
+          >
             <div
               key="dialog"
               class={dialogClass.value}

diff --git a/src/dialog/hooks.tsx b/src/dialog/hooks.tsx
@@ -116,3 +116,26 @@ export function useAction(action: BtnAction) {
   };
   return { getConfirmBtn, getCancelBtn };
 }
+
+export function useSameTarget(handleClick?: (e: MouseEvent) => void) {
+  // 判断 click 事件的起点和落点所在元素是否一致
+  let MOUSEDOWN_TARGET = false;
+  let MOUSEUP_TARGET = false;
+
+  const onClick = (e: MouseEvent) => {
+    if (MOUSEDOWN_TARGET && MOUSEUP_TARGET) {
+      handleClick(e);
+    }
+    MOUSEDOWN_TARGET = false;
+    MOUSEUP_TARGET = false;
+  };
+
+  const onMousedown = (e: MouseEvent) => {
+    MOUSEDOWN_TARGET = e.target === e.currentTarget;
+  };
+  const onMouseup = (e: MouseEvent) => {
+    MOUSEUP_TARGET = e.target === e.currentTarget;
+  };
+
+  return { onClick, onMousedown, onMouseup };
+}