diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue index dc3f69ab..0cdbf7b5 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue +++ b/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)`; } } }, diff --git a/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts b/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts index 60ea1324..99edbe20 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts +++ b/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, draggable: ComputedRef, ) { - 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, }; } diff --git a/playground/src/views/examples/modal/index.vue b/playground/src/views/examples/modal/index.vue index d4adb63a..1ce800ff 100644 --- a/playground/src/views/examples/modal/index.vue +++ b/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() {

配置 draggable 可开启拖拽功能

- +