fix(modal): 修复两个弹窗定位互相干扰问题

Author: wowCheng

packages/devui-vue/devui/modal/src/composables/use-draggable.ts

@@ -13,17 +13,18 @@ function addUnit(value?: string | number, defaultUnit = 'px'): string {
   }
 }
 
-export const modalPosition = ref('translate(-50%, -50%)');
-
 interface Draggable {
   clearPosition: () => void;
+  modalPosition: Ref<string>;
 }
 
 export const useDraggable = (
   targetRef: Ref<HTMLElement | undefined>,
   dragRef: Ref<HTMLElement | undefined>,
   draggable: ComputedRef<boolean>
 ): Draggable => {
+  const modalPosition = ref('translate(-50%, -50%)');
+
   let transform = {
     offsetX: 0,
     offsetY: 0,
@@ -103,5 +104,6 @@ export const useDraggable = (
 
   return {
     clearPosition,
+    modalPosition,
   };
 };

packages/devui-vue/devui/modal/src/modal.tsx

@@ -3,7 +3,7 @@ import { modalProps, ModalProps, ModalType } from './modal-types';
 import { Icon } from '../../icon';
 import { FixedOverlay } from '../../overlay';
 import { useModal, useModalRender } from './composables/use-modal';
-import { useDraggable, modalPosition } from './composables/use-draggable';
+import { useDraggable } from './composables/use-draggable';
 import DModalHeader from './components/header';
 import DModalBody from './components/body';
 import { useNamespace } from '../../shared/hooks/use-namespace';
@@ -28,7 +28,7 @@ export default defineComponent({
     const dialogRef = ref<HTMLElement>();
     const headerRef = ref<HTMLElement>();
     const draggable = computed(() => props.draggable);
-    const { clearPosition } = useDraggable(dialogRef, headerRef, draggable);
+    const { clearPosition, modalPosition } = useDraggable(dialogRef, headerRef, draggable);
 
     watch(modelValue, (val) => {
       if (val && !keepLast.value) {