diff options
| -rw-r--r-- | packages/client/src/components/ui/modal.vue | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue index ba29575dc4..1e4159055e 100644 --- a/packages/client/src/components/ui/modal.vue +++ b/packages/client/src/components/ui/modal.vue @@ -39,7 +39,7 @@ const props = withDefaults(defineProps<{ }>(), { manualShowing: null, src: null, - anchor: { x: 'center', y: 'bottom' }, + anchor: () => ({ x: 'center', y: 'bottom' }), preferType: 'auto', zPriority: 'low', noOverlap: true, @@ -106,7 +106,7 @@ const align = () => { const popover = content.value!; if (popover == null) return; - const rect = props.src.getBoundingClientRect(); + const srcRect = props.src.getBoundingClientRect(); const width = popover.offsetWidth; const height = popover.offsetHeight; @@ -114,8 +114,8 @@ const align = () => { let left; let top; - const x = rect.left + (fixed.value ? 0 : window.pageXOffset); - const y = rect.top + (fixed.value ? 0 : window.pageYOffset); + const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset); + const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset); if (props.anchor.x === 'center') { left = x + (props.src.offsetWidth / 2) - (width / 2); @@ -140,7 +140,7 @@ const align = () => { } const underSpace = (window.innerHeight - MARGIN) - top; - const upperSpace = (rect.top - MARGIN); + const upperSpace = (srcRect.top - MARGIN); // 画面から縦にはみ出る場合 if (top + height > (window.innerHeight - MARGIN)) { @@ -164,7 +164,7 @@ const align = () => { } const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset); - const upperSpace = (rect.top - MARGIN); + const upperSpace = (srcRect.top - MARGIN); // 画面から縦にはみ出る場合 if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) { @@ -194,16 +194,16 @@ const align = () => { let transformOriginX = 'center'; let transformOriginY = 'center'; - if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) { + if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.pageYOffset)) { transformOriginY = 'top'; - } else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) { + } else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.pageYOffset)) { transformOriginY = 'bottom'; } - if (left > rect.left + (fixed.value ? 0 : window.pageXOffset)) { - transformOriginY = 'left'; - } else if ((left + width) <= rect.left + (fixed.value ? 0 : window.pageXOffset)) { - transformOriginY = 'right'; + if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.pageXOffset)) { + transformOriginX = 'left'; + } else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.pageXOffset)) { + transformOriginX = 'right'; } transformOrigin.value = `${transformOriginX} ${transformOriginY}`; |