ZF/yudao-ui-admin-vben
1
0
Fork 0
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git synced 2025-12-30 02:22: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,
);
const shouldCentered = computed(
() => centered.value && !shouldFullscreen.value,
);
const getAppendTo = computed(() => {
return appendToMain.value
? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
@@ -115,6 +119,7 @@ const { dragging, transform } = useModalDraggable(
headerRef,
shouldDraggable,
getAppendTo,
shouldCentered,
);
const firstOpened = ref(false);
@@ -132,7 +137,9 @@ watch(
dialogRef.value = innerContentRef.$el;
// reopen modal reassign value
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 },
@@ -239,7 +246,7 @@ function handleClosed() {
'shadow-3xl': !bordered,
'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
shouldFullscreen,
'top-1/2 !-translate-y-1/2': centered && !shouldFullscreen,
'top-1/2': centered && !shouldFullscreen,
'duration-300': !dragging,
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>,
draggable: ComputedRef<boolean>,
containerSelector?: ComputedRef<string | undefined>,
centered?: ComputedRef<boolean>,
) {
const transform = reactive({
offsetX: 0,
@@ -73,7 +74,10 @@ export function useModalDraggable(
transform.offsetY = moveY;
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;
}
};
@@ -108,7 +112,7 @@ export function useModalDraggable(
const target = unrefElement(targetRef);
if (target) {
target.style.transform = 'none';
target.style.transform = '';
}
};