iter(g291): 下拉族七处弹层接上滚动跟随

This commit is contained in:
HIsheR
2026-10-26 23:20:55 +08:00
parent a093c07d40
commit f88e57f1b3
7 changed files with 77 additions and 14 deletions
+11 -2
View File
@@ -1,6 +1,6 @@
import { effect, h, signal } from '@ui-arch/frame';
import type { MenuItem, MenuProps } from './types.js';
import { flip } from './position.js';
import { flip, trackShift } from './position.js';
import { bindOutside, pushOverlay } from './overlay.js';
/*** 下拉菜单:触发器 + 自绘弹层,项支持禁用 / 危险 / 分隔线;点项 / 点外部 / Esc 关闭,↑↓ 环形导航 + Home/End 跳转 + 键入快跳 ***/
@@ -101,6 +101,15 @@ export function menu(props: MenuProps): HTMLElement {
releaseEsc = null;
}
});
effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 每次打开重算方位:空间不足自动翻转
let releaseShift: (() => void) | null = null; // 展开期间的位移跟随释放函数(滚动 / 缩放重算翻转)
effect(() => {
if (!open()) { // 收起即摘监听:弹层不在,重算方位没有意义
releaseShift?.();
releaseShift = null;
return;
}
place(flip(trigger, pop, 'bottom')); // 打开先算一次:空间不足自动翻转
releaseShift ??= trackShift(() => place(flip(trigger, pop, 'bottom'))); // 展开期间跟着滚动重算:视口空间会变
}); // 每次打开重算方位:空间不足自动翻转
return root;
}