fix(dialog): 1、修复普通对话框不脱离文档流 (#994)

* fix(dialog): 1、修复普通对话框不脱离文档流 1、修复普通对话框不脱离文档流 fix #993 * fix(dialog): eslint && test modeless 点击穿透 * fix(dialog): common分支号 * fix(dialog): 1、修复普通对话框不脱离文档流 1、修复普通对话框不脱离文档流 fix #993 * fix(dialog): eslint && test modeless 点击穿透 * fix(dialog): common分支号 Co-authored-by: 18651688439 <[email protected]>
Tencent · Jun 14, 2022 · 55f7578 · 55f7578
1 parent 4f2b56d
commit 55f7578
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 33 deletions.
diff --git a/examples/dialog/demos/modal.vue b/examples/dialog/demos/modal.vue
@@ -3,6 +3,7 @@
     <t-button theme="primary" @click="visibleModal = true">模态对话框</t-button>
     <t-button theme="primary" @click="visibleModelessDrag = true">非模态对话框</t-button>
     <t-button theme="primary" @click="visibleModeless = true">模态对话框-不可拖拽</t-button>
+    <t-button theme="primary" @click="visibleNormal = true">普通对话框-不可拖拽</t-button>
 
     <t-dialog
       header="模态对话框"
@@ -50,6 +51,17 @@
         <div>对话框内容</div>
       </div>
     </t-dialog>
+
+    <t-dialog
+      header="普通对话框-不可拖拽"
+      :visible.sync="visibleNormal"
+      mode="normal"
+      :onConfirm="() => (this.visibleNormal = false)"
+    >
+      <div slot="body">
+        <div>对话框内容</div>
+      </div>
+    </t-dialog>
   </div>
 </template>
 <script>
@@ -59,6 +71,7 @@ export default {
       visibleModal: false,
       visibleModelessDrag: false,
       visibleModeless: false,
+      visibleNormal: false,
     };
   },
   methods: {},

diff --git a/src/_common b/src/_common
diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
@@ -62,6 +62,10 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
     isModeLess(): boolean {
       return this.mode === 'modeless';
     },
+    // 是否普通对话框，没有脱离文档流的对话框
+    isNormal(): boolean {
+      return this.mode === 'normal';
+    },
     maskClass(): ClassName {
       return [`${name}__mask`, !this.showOverlay && `${prefix}-is-hidden`];
     },
@@ -70,9 +74,17 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
       return dialogClass;
     },
     positionClass(): ClassName {
-      const dialogClass = [`${name}__position`, !!this.top && `${name}--top`, `${this.placement && !this.top ? `${name}--${this.placement}` : ''}`];
+      if (this.isNormal) return [];
+      const dialogClass = [
+        `${name}__position`,
+        !!this.top && `${name}--top`,
+        `${this.placement && !this.top ? `${name}--${this.placement}` : ''}`,
+      ];
       return dialogClass;
     },
+    wrapClass(): ClassName {
+      return [!this.isNormal && `${name}__wrap`];
+    },
 
     positionStyle(): Styles {
       const topStyle = {} as Styles;
@@ -162,7 +174,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
       if (this.mode !== 'modal') return;
       emitEvent<Parameters<TdDialogProps['onOverlayClick']>>(this, 'overlay-click', { e });
       // 根据closeOnClickOverlay判断点击蒙层时是否触发close事件
-      if (this.closeOnOverlayClick) {
+      // 根据当前点击元素和绑定元素判断是否是点击mask
+      if (e.target === e.currentTarget && this.closeOnOverlayClick) {
         this.emitCloseEvent({
           trigger: 'overlay',
           e,
@@ -236,8 +249,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
       this.disY = targetEvent.clientY - target.offsetTop;
       this.dialogW = target.offsetWidth;
       this.dialogH = target.offsetHeight;
-      this.windowInnerWidth = (window.innerWidth || document.documentElement.clientWidth);
-      this.windowInnerHeight = (window.innerHeight || document.documentElement.clientHeight);
+      this.windowInnerWidth = window.innerWidth || document.documentElement.clientWidth;
+      this.windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
       // 如果弹出框超出屏幕范围 不能进行拖拽
       if (this.dialogW > this.windowInnerWidth || this.dialogH > this.windowInnerHeight) return;
       // 元素按下时注册document鼠标监听事件
@@ -311,11 +324,10 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
       );
       const bodyClassName = this.theme === 'default' ? `${name}__body` : `${name}__body__icon`;
       // 此处获取定位方式 top 优先级较高 存在时 默认使用top定位
-
       return (
         // /* 非模态形态下draggable为true才允许拖拽 */
-        <div class={`${name}__wrap`} onClick={this.overlayAction} >
-          <div class={this.positionClass} style={this.positionStyle}>
+        <div class={this.wrapClass}>
+          <div class={this.positionClass} style={this.positionStyle} onClick={this.overlayAction}>
             <div key="dialog" ref="dialog" class={this.dialogClass} style={this.dialogStyle}>
               <div class={`${name}__header`}>
                 {this.getIcon()}
@@ -332,8 +344,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
               <div class={bodyClassName}>{body}</div>
               <div class={`${name}__footer`}>{renderTNodeJSX(this, 'footer', defaultFooter)}</div>
             </div>
+          </div>
         </div>
-      </div>
       );
     },
   },
@@ -343,11 +355,15 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
     const dialogView = this.renderDialog();
     const view = [maskView, dialogView];
     const ctxStyle: any = { zIndex: this.zIndex };
+    // dialog__ctx--fixed 绝对定位
+    // dialog__ctx--absolute 挂载在attach元素上 相对定位
+    // __ctx--modeless modeless 点击穿透
     const ctxClass = [
       `${name}__ctx`,
       {
         [`${prefix}-dialog__ctx--fixed`]: this.mode === 'modal',
         [`${prefix}-dialog__ctx--absolute`]: this.isModal && this.showInAttachedElement,
+        [`${name}__ctx--modeless`]: this.isModeLess,
       },
     ];
     return (

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -5323,7 +5323,8 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/icon.vue correctly 1`
 `;
 
 exports[`ssr snapshot test renders ./examples/dialog/demos/modal.vue correctly 1`] = `
-<div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">模态对话框</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">非模态对话框</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">模态对话框-不可拖拽</span></button>
+<div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">模态对话框</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">非模态对话框</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">模态对话框-不可拖拽</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">普通对话框-不可拖拽</span></button>
+  <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>

diff --git a/test/unit/config-provider/__snapshots__/demo.test.js.snap b/test/unit/config-provider/__snapshots__/demo.test.js.snap
@@ -1051,10 +1051,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
       class="t-dialog__ctx"
     >
       <div
-        class="t-dialog__wrap"
+        class=""
       >
         <div
-          class="t-dialog__position t-dialog--top"
+          class=""
         >
           <div
             class="t-dialog t-dialog--default t-dialog__modal-default"
@@ -1128,10 +1128,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
       class="t-dialog__ctx"
     >
       <div
-        class="t-dialog__wrap"
+        class=""
       >
         <div
-          class="t-dialog__position t-dialog--top"
+          class=""
         >
           <div
             class="t-dialog t-dialog--default t-dialog__modal-info"
@@ -1218,10 +1218,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
       class="t-dialog__ctx"
     >
       <div
-        class="t-dialog__wrap"
+        class=""
       >
         <div
-          class="t-dialog__position t-dialog--top"
+          class=""
         >
           <div
             class="t-dialog t-dialog--default t-dialog__modal-warning"
@@ -1308,10 +1308,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
       class="t-dialog__ctx"
     >
       <div
-        class="t-dialog__wrap"
+        class=""
       >
         <div
-          class="t-dialog__position t-dialog--top"
+          class=""
         >
           <div
             class="t-dialog t-dialog--default t-dialog__modal-danger"
@@ -1398,10 +1398,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
       class="t-dialog__ctx"
     >
       <div
-        class="t-dialog__wrap"
+        class=""
       >
         <div
-          class="t-dialog__position t-dialog--top"
+          class=""
         >
           <div
             class="t-dialog t-dialog--default t-dialog__modal-success"
+1 −1		docs/mobile/api/dialog.md
+12 −0		style/web/components/dialog/_index.less
+5 −1		style/web/components/time-picker-new/_index.less