fix: fix modal position after drag to prevent offset on reopen (#4261)

* fix: fix typo

* fix: fix modal position after drag to prevent offset on reopen

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -73,7 +73,11 @@ const shouldDraggable = computed(
   () => draggable.value && !shouldFullscreen.value,
 );
 
-const { dragging } = useModalDraggable(dialogRef, headerRef, shouldDraggable);
+const { dragging, transform } = useModalDraggable(
+  dialogRef,
+  headerRef,
+  shouldDraggable,
+);
 
 // const loadingStyle = computed(() => {
 //   // py-5 4px*5*2
@@ -96,6 +100,10 @@ watch(
       if (contentRef.value) {
         const innerContentRef = contentRef.value.getContentRef();
         dialogRef.value = innerContentRef.$el;
+
+        // reopen modal reassign value
+        const { offsetX, offsetY } = transform;
+        dialogRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
       }
     }
   },

packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts

@@ -3,7 +3,7 @@
  * 调整部分细节
  */
 
-import { onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { onBeforeUnmount, onMounted, reactive, ref, watchEffect } from 'vue';
 import type { ComputedRef, Ref } from 'vue';
 
 import { unrefElement } from '@vueuse/core';
@@ -13,10 +13,10 @@ export function useModalDraggable(
   dragRef: Ref<HTMLElement | undefined>,
   draggable: ComputedRef<boolean>,
 ) {
-  let transform = {
+  const transform = reactive({
     offsetX: 0,
     offsetY: 0,
-  };
+  });
 
   const dragging = ref(false);
 
@@ -63,10 +63,8 @@ export function useModalDraggable(
       moveY = Math.min(Math.max(moveY, minTop), maxTop);
       //  + y;
 
-      transform = {
-        offsetX: moveX,
-        offsetY: moveY,
-      };
+      transform.offsetX = moveX;
+      transform.offsetY = moveY;
 
       if (targetRef.value) {
         targetRef.value.style.transform = `translate(${moveX}px, ${moveY}px)`;
@@ -100,10 +98,9 @@ export function useModalDraggable(
   };
 
   const resetPosition = () => {
-    transform = {
-      offsetX: 0,
-      offsetY: 0,
-    };
+    transform.offsetX = 0;
+    transform.offsetY = 0;
+
     const target = unrefElement(targetRef);
     if (target) {
       target.style.transform = 'none';
@@ -127,6 +124,7 @@ export function useModalDraggable(
   return {
     dragging,
     resetPosition,
+    transform,
   };
 }
 

playground/src/views/examples/modal/index.vue

@@ -38,7 +38,7 @@ function openAutoHeightModal() {
   autoHeightModalApi.open();
 }
 
-function openDargModal() {
+function openDragModal() {
   dragModalApi.open();
 }
 
@@ -83,7 +83,7 @@ function handleUpdateTitle() {
 
     <Card class="mb-4" title="可拖拽示例">
       <p class="mb-3">配置 draggable 可开启拖拽功能</p>
-      <Button type="primary" @click="openDargModal">打开弹窗</Button>
+      <Button type="primary" @click="openDragModal">打开弹窗</Button>
     </Card>
 
     <Card class="mb-4" title="动态配置示例">