fix: 弹出框蒙层点击是否关闭修复 & provide暴露$dialog, close #12

Tencent · Mar 10, 2022 · 06fb5c5 · 06fb5c5
1 parent 04d0f6a
commit 06fb5c5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/dialog/demos/mobile.vue b/src/dialog/demos/mobile.vue
@@ -8,10 +8,12 @@
         <t-button variant="outline" size="large" @click="changeDialogVisible(2)"> 多行标题对话框 </t-button>
         <t-button variant="outline" size="large" @click="changeDialogVisible(3)"> 短文本对话框 </t-button>
         <t-button variant="outline" size="large" @click="changeDialogVisible(4)"> 长文本对话框 </t-button>
+        <t-button variant="outline" size="large" @click="eventDialog()"> 函数调用长文本对话框 </t-button>
         <t-dialog
           v-model:visible="isShowDialog1"
           :title="singleHeader"
           :confirm-btn="confirmButtonText"
+          :close-on-overlay-click="false"
           :show-overlay="showOverlay"
         >
         </t-dialog>
@@ -110,6 +112,7 @@
 
 <script lang="ts">
 import { ref, defineComponent } from 'vue';
+import { Dialog } from '../../components';
 
 export default defineComponent({
   setup() {},
@@ -238,6 +241,10 @@ export default defineComponent({
       }
     },
 
+    eventDialog() {
+      Dialog.alert(this.moreTextContent);
+    },
+
     onConfirm() {
       console.log('dialog:confirm');
     },

diff --git a/src/dialog/dialog.vue b/src/dialog/dialog.vue
@@ -107,6 +107,9 @@ export default defineComponent({
     };
 
     const handleOverlayClick = () => {
+      if (!props.closeOnOverlayClick) {
+        return;
+      }
       context.emit('update:visible', false);
       context.emit('close', 'overlay');
       context.emit('overlay-click');

diff --git a/src/dialog/index.ts b/src/dialog/index.ts
@@ -12,16 +12,13 @@ export const DialogPropsDefault = {
   title: '温馨提醒',
   content: '',
   type: '',
-  showFooter: true,
-  placeholderText: '',
   confirmBtn: '确认',
-  cancelContent: '取消',
-  isInput: false,
+  cancelBtn: '取消',
   visible: false,
-  knowContent: '我知道了',
   zIndex: 2500,
   showOverlay: true,
   width: '320px',
+  closeOnOverlayClick: false,
 };
 
 let instance: DefineComponent;
@@ -108,6 +105,7 @@ Dialog.install = (app: App, name = '') => {
 
   // 添加插件入口
   app.config.globalProperties.$dialog = Dialog;
+  app.provide('$dialog', Dialog);
 };
 
 type DialogApi = {