Merge pull request #95 from WeBankFinTech/modal_closable

Modal confirm closable 属性开放配置
WeBankFinTech · Apr 2, 2022 · ca0a8a0 · ca0a8a0
2 parents 41e8c78 + 6435e42
commit ca0a8a0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/components/modal/modalApi.tsx b/components/modal/modalApi.tsx
@@ -23,7 +23,6 @@ interface ModalConfig {
 type VNodeProperty = 'title' | 'content' | 'footer';
 
 const forceProps = {
-    closable: false,
     maskClosable: false,
     forGlobal: true,
     displayDirective: 'if',
@@ -43,6 +42,7 @@ function create(type: ModalType, config: ModalConfig) {
     } = {
         width: 400,
         show: true,
+        closable: false,
     };
     let cbFuncEnd = false;
 
@@ -60,22 +60,27 @@ function create(type: ModalType, config: ModalConfig) {
         render(<Modal {...props} v-slots={slots} />, div);
     }
 
-    async function handleCallBack(event: MouseEvent, cbFunc?: (event: MouseEvent) => void | Promise<any>) {
+    async function handleCallBack(
+        event: MouseEvent,
+        cbFunc?: (event: MouseEvent) => void | Promise<any>,
+    ) {
         if (cbFuncEnd) return;
         cbFuncEnd = true;
         try {
             if (isFunction(cbFunc)) await cbFunc(event);
             mergeProps.show = false;
             renderModal();
-        } catch (error) { }
+        } catch (error) {}
         cbFuncEnd = false;
     }
 
     function updateProps(options: ModalConfig) {
         // 更新 props
         Object.assign(mergeProps, options || {});
-        mergeProps.onOk = (event: MouseEvent) => handleCallBack(event, options.onOk);
-        mergeProps.onCancel = (event: MouseEvent) => handleCallBack(event, options.onCancel);
+        mergeProps.onOk = (event: MouseEvent) =>
+            handleCallBack(event, options.onOk);
+        mergeProps.onCancel = (event: MouseEvent) =>
+            handleCallBack(event, options.onCancel);
 
         // 更新 slots
         ['title', 'content', 'footer'].forEach((key) => {

diff --git a/docs/.vitepress/components/modal/index.md b/docs/.vitepress/components/modal/index.md
@@ -14,28 +14,24 @@ app.use(FModal);
 
 ### 基础用法
 
-
 --COMMON
 
 ### 确认对话框
 
 使用 `confirm()` 可以快捷地弹出确认框。
 
-
 --CONFIRM
 
 ### 信息反馈
 
-各种类型的信息提示，只提供一个按钮用于关闭。
-
+各种类型的信息提示
 
 --FEEDBACK
 
 ### 自定义页脚
 
 通过 slot `footer`可以自定义页脚内容
 
-
 --FOOTER
 
 --CODE
@@ -55,7 +51,7 @@ app.use(FModal);
 | cancelText       | 取消按钮文字                                                                   | String            | 取消                  |
 | width            | 宽度                                                                           | String/Number     | 520                   |
 | top              | 距离顶部                                                                       | String/Number     | 50                    |
-| verticalCenter | 垂直居中 | Boolean | false |
+| verticalCenter   | 垂直居中                                                                       | Boolean           | false                 |
 | center           | 标题、内容、按钮居中                                                           | Boolean           | `false`               |
 | fullScreen       | 全屏显示                                                                       | Boolean           | `false`               |
 | contentClass     | 可用于设置内容的类名                                                           | String            | -                     |
@@ -118,7 +114,7 @@ const modal = Modal.info();
 
 modal.update({
     title: '修改的标题',
-    content: '修改的内容'
+    content: '修改的内容',
 });
 
 modal.destroy();