From 80658acecb9974596eb0c95d5fc5059142eb5adf Mon Sep 17 00:00:00 2001
From: lijianxiong <1518062161@qq.com>
Date: Sun, 27 Oct 2024 15:18:41 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=A8=A1=E6=80=81=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E9=80=82=E9=85=8D=E5=BC=B9=E7=AA=97=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8F=8A=E5=8F=AF=E9=80=9A=E8=BF=87=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E5=8F=82=E6=95=B0=E9=85=8D=E7=BD=AE=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE=E4=B8=8E?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86=E9=81=AE=E7=BD=A9=E6=98=AF=E5=90=A6=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                |  1 +
 src/util/app-modal/app-modal-component.scss | 35 ++++++++++++++++++++-
 src/util/app-modal/app-modal-component.tsx  | 35 +++++++++++++++++++--
 3 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 444c53cb0a..3606025c57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - 新增支持预置登录视图
 - 模态打开视图工具类方法识别平台配置参数
 - 更新时间范围选择器适配内容宽度超出后结束时间出省略号
+- 模态弹窗适配弹窗关闭按钮及可通过视图参数配置弹框关闭按钮与弹框遮罩是否显示
 
 ### Change
 
diff --git a/src/util/app-modal/app-modal-component.scss b/src/util/app-modal/app-modal-component.scss
index f2492fbfba..6b3e2ce711 100644
--- a/src/util/app-modal/app-modal-component.scss
+++ b/src/util/app-modal/app-modal-component.scss
@@ -10,7 +10,40 @@ $modal: ('z-index': getCssVar('z-index', 'modal'),
   --van-padding-md: 0;
   --van-dialog-radius: 0;
 
+  @include e(close) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: getCssVar('font-size', 'header-5');
+    left: getCssVar('font-size', 'header-5');
+    background-color: transparent;
+    z-index: 1;
+    color: getCssVar('color-text', '3');
+    font-size: getCssVar('font-size', 'header-3');
+    padding: 0;
+    &.van-button {
+      border: none;
+      width: getCssVar('font-size', 'header-3');
+      height: getCssVar('font-size', 'header-3');
+      &>.van-button__content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  &.van-dialog {
+    overflow: visible;
+  }
+  .van-dialog__header {
+    padding-top: 0;
+    position: relative;
+    min-height: 1px;
+  }
   .van-dialog__content {
     height: 100%;
+    overflow: hidden;
   }
-}
\ No newline at end of file
+}
diff --git a/src/util/app-modal/app-modal-component.tsx b/src/util/app-modal/app-modal-component.tsx
index 8192c90fc1..4f36892b94 100644
--- a/src/util/app-modal/app-modal-component.tsx
+++ b/src/util/app-modal/app-modal-component.tsx
@@ -48,7 +48,14 @@ export const AppModalComponent = defineComponent({
     }
 
     // 合并options
-    const options = ref<IModalOptions>({ footerHide: true, modalClass: '' });
+    const options = ref<IParams>({
+      footerHide: true,
+      modalClass: '',
+      // 是否显示弹框关闭按钮，默认不显示
+      showClose: false,
+      // 是否显示遮罩，默认显示
+      overlay: true,
+    });
     if (props.opts) {
       Object.assign(options.value, props.opts);
     }
@@ -76,6 +83,12 @@ export const AppModalComponent = defineComponent({
       isShow.value = true;
     };
 
+    // 弹框关闭
+    const onDialogClose = () => {
+      isShow.value = false;
+      onBeforeClose();
+    };
+
     return {
       ns,
       isShow,
@@ -86,9 +99,26 @@ export const AppModalComponent = defineComponent({
       present,
       dismiss,
       onBeforeClose,
+      onDialogClose,
     };
   },
   render() {
+    const slots: IData = {
+      default: () => this.$slots.default?.(this.modal),
+    };
+    if (this.options.showClose) {
+      slots.title = () => {
+        return (
+          <van-button
+            class={this.ns.e('close')}
+            plain
+            onClick={this.onDialogClose}
+          >
+            <van-icon name='cross' />
+          </van-button>
+        );
+      };
+    }
     return (
       <van-dialog
         show={this.isShow}
@@ -99,9 +129,10 @@ export const AppModalComponent = defineComponent({
           this.options.modalClass,
         ]}
         style={this.customStyle}
+        overlay={this.options.overlay}
         before-close={this.onBeforeClose}
       >
-        {this.$slots.default?.(this.modal)}
+        {slots}
       </van-dialog>
     );
   },
-- 
Gitee