ZF/yudao-ui-admin-vben
1
0
Fork 0
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git synced 2025-12-30 10:32:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: centered 为 true 时设置 draggable 无法拖拽 (#6948)

Browse Source 
Co-authored-by: sqchen <chenshiqi@sshlx.com>
This commit is contained in:
panda7
2025-11-24 08:38:10 +08:00
committed by GitHub
parent 8b0f138100
commit b6edc5f574
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,6 +104,10 @@ const shouldDraggable = computed(
() => draggable.value && !shouldFullscreen.value && header.value, () => draggable.value && !shouldFullscreen.value && header.value,
); );
const shouldCentered = computed(
() => centered.value && !shouldFullscreen.value,
);
const getAppendTo = computed(() => { const getAppendTo = computed(() => {
return appendToMain.value return appendToMain.value
? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div` ? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
@@ -115,6 +119,7 @@ const { dragging, transform } = useModalDraggable(
headerRef, headerRef,
shouldDraggable, shouldDraggable,
getAppendTo, getAppendTo,
shouldCentered,
); );
const firstOpened = ref(false); const firstOpened = ref(false);
@@ -132,7 +137,9 @@ watch(
dialogRef.value = innerContentRef.$el; dialogRef.value = innerContentRef.$el;
// reopen modal reassign value // reopen modal reassign value
const { offsetX, offsetY } = transform; const { offsetX, offsetY } = transform;
dialogRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`; dialogRef.value.style.transform = shouldCentered.value
? `translate(${offsetX}px, calc(-50% + ${offsetY}px))`
: `translate(${offsetX}px, ${offsetY}px)`;
} }
}, },
{ immediate: true }, { immediate: true },
@@ -239,7 +246,7 @@ function handleClosed() {
'shadow-3xl': !bordered, 'shadow-3xl': !bordered,
'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0': 'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
shouldFullscreen, shouldFullscreen,
'top-1/2 !-translate-y-1/2': centered && !shouldFullscreen, 'top-1/2': centered && !shouldFullscreen,
'duration-300': !dragging, 'duration-300': !dragging,
hidden: isClosed, hidden: isClosed,
}, },

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

@@ -14,6 +14,7 @@ export function useModalDraggable(
dragRef: Ref<HTMLElement | undefined>, dragRef: Ref<HTMLElement | undefined>,
draggable: ComputedRef<boolean>, draggable: ComputedRef<boolean>,
containerSelector?: ComputedRef<string | undefined>, containerSelector?: ComputedRef<string | undefined>,
centered?: ComputedRef<boolean>,
) { ) {
const transform = reactive({ const transform = reactive({
offsetX: 0, offsetX: 0,
@@ -73,7 +74,10 @@ export function useModalDraggable(
transform.offsetY = moveY; transform.offsetY = moveY;
if (targetRef.value) { if (targetRef.value) {
targetRef.value.style.transform = `translate(${moveX}px, ${moveY}px)`; const isCentered = centered?.value;
targetRef.value.style.transform = isCentered
? `translate(${moveX}px, calc(-50% + ${moveY}px))`
: `translate(${moveX}px, ${moveY}px)`;
dragging.value = true; dragging.value = true;
} }
}; };
@@ -108,7 +112,7 @@ export function useModalDraggable(
const target = unrefElement(targetRef); const target = unrefElement(targetRef);
if (target) { if (target) {
target.style.transform = 'none'; target.style.transform = '';
} }
}; };