iter(g32): tree 补 ↑↓/Home/End 行间导航
This commit is contained in:
@@ -72,9 +72,22 @@ export function tree(props: TreeProps): HTMLElement {
|
||||
}
|
||||
});
|
||||
|
||||
/*** 当前可见的节点行(收起分支的子节点不参与 ↑↓ 遍历) ***/
|
||||
const visibleRows = (): HTMLElement[] =>
|
||||
Array.from(root.querySelectorAll<HTMLElement>('.ua-tree-row')).filter((el) => !el.closest('.ua-tree-children[hidden]'));
|
||||
|
||||
root.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
const row = (e.target as HTMLElement).closest('.ua-tree-row') as HTMLElement | null;
|
||||
if (!row) return; // 卫语句:焦点不在节点行
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {
|
||||
const list = visibleRows();
|
||||
const at = list.indexOf(row);
|
||||
if (at < 0) return; // 卫语句:行已不在可见集
|
||||
e.preventDefault();
|
||||
const next = e.key === 'Home' ? list[0] : e.key === 'End' ? list[list.length - 1] : list[at + (e.key === 'ArrowDown' ? 1 : -1)];
|
||||
next?.focus(); // 行间移动只改焦点,不改变选中
|
||||
return;
|
||||
}
|
||||
const key = [...rows.entries()].find(([, el]) => el === row)?.[0];
|
||||
if (!key) return; // 卫语句:找不到对应节点
|
||||
const node = findNode(props.nodes, key);
|
||||
|
||||
@@ -1772,7 +1772,7 @@
|
||||
"节点树用 { key, label, children } 描述,key 唯一即可(选中与展开都按 key 记)",
|
||||
"传 selected 信号即可外部受控;不传则组件内部维护选中态",
|
||||
"点箭头只展开/收起,点标签才选中;叶子节点箭头位置留空以对齐",
|
||||
"键盘 Enter/空格 选中、→ 展开、← 收起;disabled 节点点击与键盘都不响应",
|
||||
"键盘:↑↓ 在可见节点间移动、Home/End 到首末行(只移动焦点),Enter/空格 选中、→ 展开、← 收起;disabled 节点点击与键盘都不响应",
|
||||
"defaultExpandAll 首屏展开全部分支(外部已给 expanded 初值时以外部为准)"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user