fix(dialog): 修复dialog初始化时没有执行移动相关的初始化逻辑,导致image-viewer小窗口图片查看器无法移动问题

Tencent · Jul 25, 2023 · 383d428 · 383d428
1 parent 3277486
commit 383d428
Showing 1 changed file with 37 additions and 30 deletions.
diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
@@ -147,40 +147,47 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
   },
 
   watch: {
-    visible(value) {
-      if (value) {
-        this.animationEnd = false;
-        if ((this.isModal && !this.showInAttachedElement) || this.isFullScreen) {
-          if (this.preventScrollThrough) {
-            document.head.appendChild(this.styleEl);
-          }
+    visible: {
+      handler(value) {
+        if (value) {
+          this.animationEnd = false;
+          if ((this.isModal && !this.showInAttachedElement) || this.isFullScreen) {
+            if (this.preventScrollThrough) {
+              this.$nextTick(() => {
+                document.head.appendChild(this.styleEl);
+              });
+            }
 
+            this.$nextTick(() => {
+              const target = this.$refs.dialog as HTMLElement;
+              if (mousePosition && target) {
+                target.style.transformOrigin = `${mousePosition.x - target.offsetLeft}px ${
+                  mousePosition.y - target.offsetTop
+                }px`;
+              }
+            });
+          }
+          // 清除鼠标焦点 避免entry事件多次触发（按钮弹出弹窗 不移除焦点 立即按Entry按键 会造成弹窗关闭再弹出）
+          (document.activeElement as HTMLElement).blur();
+        } else {
+          this.clearStyleFunc();
+        }
+        // 多个dialog同时存在时使用esc关闭异常 (#1209)
+        this.storeUid(value);
+        this.addKeyboardEvent(value);
+        if (this.isModeLess && this.draggable) {
           this.$nextTick(() => {
-            const target = this.$refs.dialog as HTMLElement;
-            if (mousePosition && target) {
-              target.style.transformOrigin = `${mousePosition.x - target.offsetLeft}px ${
-                mousePosition.y - target.offsetTop
-              }px`;
-            }
+            this.initDragEvent(value);
           });
         }
-        // 清除鼠标焦点 避免entry事件多次触发（按钮弹出弹窗 不移除焦点 立即按Entry按键 会造成弹窗关闭再弹出）
-        (document.activeElement as HTMLElement).blur();
-      } else {
-        this.clearStyleFunc();
-      }
-      // 多个dialog同时存在时使用esc关闭异常 (#1209)
-      this.storeUid(value);
-      this.addKeyboardEvent(value);
-      if (this.isModeLess && this.draggable) {
-        this.initDragEvent(value);
-      }
-      // 父元素为 display: none 时，需要更新子元素，避免 Dialog 前套 Table 组件时，固定列等特性失效
-      if (value && !this.destroyOnClose && requestAnimationFrame) {
-        requestAnimationFrame(() => {
-          updateElement(this);
-        });
-      }
+        // 父元素为 display: none 时，需要更新子元素，避免 Dialog 前套 Table 组件时，固定列等特性失效
+        if (value && !this.destroyOnClose && requestAnimationFrame) {
+          requestAnimationFrame(() => {
+            updateElement(this);
+          });
+        }
+      },
+      immediate: true,
     },
   },
   mounted() {