iter(g139): 提示气泡支持左右方位

This commit is contained in:
HIsheR
2026-10-26 15:32:47 +08:00
parent a3db5e66fc
commit 08ceb8f127
9 changed files with 62 additions and 18 deletions
+13
View File
@@ -9,3 +9,16 @@ export function flip(trigger: HTMLElement, panel: HTMLElement, preferred: 'top'
if (preferred === 'top') return up >= h + GAP || up >= down ? 'top' : 'bottom'; // 首选上方:放得下、或不比下方更局促就保持
return down >= h + GAP || down >= up ? 'bottom' : 'top'; // 首选下方:对称判定
}
/*** 浮层方位判定(四向):水平方向按宽度判左右空间,垂直方向复用 flip 的上下一套逻辑 ***/
export function flipSide(trigger: HTMLElement, panel: HTMLElement, preferred: 'top' | 'bottom' | 'left' | 'right'): 'top' | 'bottom' | 'left' | 'right' {
const GAP = 8; // 与样式表预留的间距一致
const MIN = 24; // 兜底:面板尚未量出宽度时按最小可读宽度估算
if (preferred === 'top' || preferred === 'bottom') return flip(trigger, panel, preferred); // 垂直交回原判定
const t = trigger.getBoundingClientRect();
const w = panel.offsetWidth || MIN;
const left = t.left; // 触发器左侧可用空间
const right = window.innerWidth - t.right; // 触发器右侧可用空间
if (preferred === 'left') return left >= w + GAP || left >= right ? 'left' : 'right'; // 对称判定
return right >= w + GAP || right >= left ? 'right' : 'left';
}