fix(dialog): 非模态对话框优化拖拽事件鼠标表现 (#1352)

* fix(dialog): 弹窗拖拽鼠标样式优化 * fix(dialog): 快照更新 common id 更新 * chore: update common Co-authored-by: 18651688439 <1164668598@qq.com> Co-authored-by: Uyarn <uyarnchen@gmail.com>
Tencent · Oct 26, 2022 · 1d25ed3 · 1d25ed3
1 parent 797499e
commit 1d25ed3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/dialog/__tests__/__snapshots__/demo.test.js.snap b/src/dialog/__tests__/__snapshots__/demo.test.js.snap
@@ -1987,7 +1987,7 @@ exports[`Dialog Dialog dragVue demo works fine 1`] = `
           class="t-dialog__position t-dialog--top"
         >
           <div
-            class="t-dialog t-dialog--default t-dialog__modal-default"
+            class="t-dialog t-dialog--default t-dialog__modal-default t-dialog--draggable"
           >
             <div
               class="t-dialog__header"
@@ -2682,7 +2682,7 @@ exports[`Dialog Dialog modalVue demo works fine 1`] = `
           class="t-dialog__position t-dialog--top"
         >
           <div
-            class="t-dialog t-dialog--default t-dialog__modal-default"
+            class="t-dialog t-dialog--default t-dialog__modal-default t-dialog--draggable"
           >
             <div
               class="t-dialog__header"

diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
@@ -86,6 +86,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
         `${this.componentName}`,
         `${this.componentName}--default`,
         `${this.componentName}__modal-${this.theme}`,
+        this.isModeLess && this.draggable && `${this.componentName}--draggable`,
       ];
       return dialogClass;
     },
@@ -343,6 +344,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
         target.style.top = `${this.dTop * (window.innerHeight / this.windowInnerHeight)}px`;
       }
     },
+    onStopDown(e: MouseEvent) {
+      if (this.isModeLess && this.draggable) e.stopPropagation();
+    },
     renderDialog() {
       const { CloseIcon } = this.useGlobalIcon({
         CloseIcon: TdCloseIcon,
@@ -376,7 +380,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
         <div class={this.wrapClass}>
           <div class={this.positionClass} style={this.positionStyle} onClick={this.overlayAction} ref="dialogPosition">
             <div key="dialog" ref="dialog" class={this.dialogClass} style={this.dialogStyle}>
-              <div class={`${this.componentName}__header`}>
+              <div class={`${this.componentName}__header`} onmousedown={this.onStopDown}>
                 {this.getIcon()}
                 {renderTNodeJSX(this, 'header', defaultHeader)}
               </div>
@@ -385,8 +389,12 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
                   {renderTNodeJSX(this, 'closeBtn', defaultCloseBtn)}
                 </span>
               ) : null}
-              <div class={bodyClassName}>{body}</div>
-              <div class={`${this.componentName}__footer`}>{renderTNodeJSX(this, 'footer', defaultFooter)}</div>
+              <div class={bodyClassName} onmousedown={this.onStopDown}>
+                {body}
+              </div>
+              <div class={`${this.componentName}__footer`} onmousedown={this.onStopDown}>
+                {renderTNodeJSX(this, 'footer', defaultFooter)}
+              </div>
             </div>
           </div>
         </div>