public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-08 07:31:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

Browse Source
This commit is contained in:
dap
2025-06-25 11:35:17 +08:00
parent 445e6011da 2f7d1f009d
commit 383756c0aa
5 changed files with 63 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -105,10 +105,17 @@ const shouldDraggable = computed(
() => draggable.value && !shouldFullscreen.value && header.value,
);
const getAppendTo = computed(() => {
return appendToMain.value
? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
: undefined;
});
const { dragging, transform } = useModalDraggable(
dialogRef,
headerRef,
shouldDraggable,
getAppendTo,
);
const firstOpened = ref(false);
@@ -198,11 +205,6 @@ function handleFocusOutside(e: Event) {
e.preventDefault();
e.stopPropagation();
}
const getAppendTo = computed(() => {
return appendToMain.value
? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
: undefined;
});
const getForceMount = computed(() => {
return !unref(destroyOnClose) && unref(firstOpened);
@@ -224,7 +226,8 @@ function handleClosed() {
:append-to="getAppendTo"
:class="
cn(
'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-[var(--radius)]',
'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0',
shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-[var(--radius)]',
modalClass,
{
'border-border border': bordered,

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

@@ -12,6 +12,7 @@ export function useModalDraggable(
targetRef: Ref<HTMLElement | undefined>,
dragRef: Ref<HTMLElement | undefined>,
draggable: ComputedRef<boolean>,
containerSelector?: ComputedRef<string | undefined>,
) {
const transform = reactive({
offsetX: 0,
@@ -29,20 +30,36 @@ export function useModalDraggable(
}
const targetRect = targetRef.value.getBoundingClientRect();
const { offsetX, offsetY } = transform;
const targetLeft = targetRect.left;
const targetTop = targetRect.top;
const targetWidth = targetRect.width;
const targetHeight = targetRect.height;
const docElement = document.documentElement;
const clientWidth = docElement.clientWidth;
const clientHeight = docElement.clientHeight;
const minLeft = -targetLeft + offsetX;
const minTop = -targetTop + offsetY;
const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
const maxTop = clientHeight - targetTop - targetHeight + offsetY;
let containerRect: DOMRect | null = null;
if (containerSelector?.value) {
const container = document.querySelector(containerSelector.value);
if (container) {
containerRect = container.getBoundingClientRect();
}
}
let maxLeft, maxTop, minLeft, minTop;
if (containerRect) {
minLeft = containerRect.left - targetLeft + offsetX;
maxLeft = containerRect.right - targetLeft - targetWidth + offsetX;
minTop = containerRect.top - targetTop + offsetY;
maxTop = containerRect.bottom - targetTop - targetHeight + offsetY;
} else {
const docElement = document.documentElement;
const clientWidth = docElement.clientWidth;
const clientHeight = docElement.clientHeight;
minLeft = -targetLeft + offsetX;
minTop = -targetTop + offsetY;
maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
maxTop = clientHeight - targetTop - targetHeight + offsetY;
}
const onMousemove = (e: MouseEvent) => {
let moveX = offsetX + e.clientX - downX;