From 2346a90c0839a24773c8599a0e98f85e3bf92373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Wed, 15 Sep 2021 10:56:14 +0800
Subject: [PATCH] fix(modal): `maskClosable` and `Esc` take no effect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复BasicModal按Esc和点击遮罩无法关闭的问题

fixed: #1203
---
 src/components/Modal/src/BasicModal.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/src/BasicModal.vue b/src/components/Modal/src/BasicModal.vue
index c1650994..89bc8798 100644
--- a/src/components/Modal/src/BasicModal.vue
+++ b/src/components/Modal/src/BasicModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal v-bind="getBindValue">
+  <Modal v-bind="getBindValue" @cancel="handleCancel">
     <template #closeIcon v-if="!$slots.closeIcon">
       <ModalClose
         :canFullscreen="getProps.canFullscreen"
@@ -72,6 +72,7 @@
   import { basicProps } from './props';
   import { useFullScreen } from './hooks/useModalFullScreen';
   import { omit } from 'lodash-es';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'BasicModal',
@@ -83,6 +84,7 @@
       const visibleRef = ref(false);
       const propsRef = ref<Partial<ModalProps> | null>(null);
       const modalWrapperRef = ref<any>(null);
+      const { prefixCls } = useDesign('basic-modal');
 
       // modal   Bottom and top height
       const extHeightRef = ref(0);
@@ -175,7 +177,8 @@
       // 取消事件
       async function handleCancel(e: Event) {
         e?.stopPropagation();
-
+        // 过滤自定义关闭按钮的空白区域
+        if ((e.target as HTMLElement)?.classList?.contains(prefixCls + '-close--custom')) return;
         if (props.closeFunc && isFunction(props.closeFunc)) {
           const isClose: boolean = await props.closeFunc();
           visibleRef.value = !isClose;
-- 
GitLab