iter(g31): 新增 tree 树形组件

This commit is contained in:
HIsheR
2026-10-26 11:42:25 +08:00
parent 4f512b0d6b
commit 4b0dbfecec
13 changed files with 324 additions and 9 deletions
+24
View File
@@ -27,6 +27,7 @@ import {
inputNumber,
list,
carousel,
tree,
menu,
modal,
pagination,
@@ -176,6 +177,7 @@ const tableLoading = signal(false);
const menuPick = signal('');
const listPick = signal(''); // 列表点击选中的条目标题
const slideIndex = signal(0); // 轮播当前下标(外部受控演示)
const treePick = signal('core'); // 树形选中节点 key
// —— 禁用态演示:开关信号同时绑定 switch 的 checked 与 checkbox 的 disabled ——
const locked = signal(true);
@@ -619,6 +621,28 @@ const content = h(
h('span', { class: 'out' }, () => `第 ${slideIndex() + 1} / 3 张`),
),
),
section(
'sec-tree',
'树形',
'tree:递归节点,箭头展开/收起、点标签选中;键盘 Enter 选中、→ 展开、← 收起,禁用节点不响应。',
h(
'div',
{ class: 'row' },
tree({
nodes: [
{ key: 'src', label: 'src', children: [
{ key: 'core', label: 'core', children: [{ key: 'frame', label: 'frame' }, { key: 'table', label: 'table-core' }] },
{ key: 'skin', label: 'skin', children: [{ key: 'ui', label: 'ui' }, { key: 'css', label: 'ui.css' }] },
] },
{ key: 'apps', label: 'apps', children: [{ key: 'demo', label: 'demo' }, { key: 'docs', label: 'docs' }] },
{ key: 'lock', label: 'package-lock.json(禁用示例)', disabled: true },
],
selected: treePick,
onSelect: (n) => treePick(n.key),
}),
h('span', { class: 'out' }, () => (treePick() ? `已选节点:${treePick()}` : '未选中节点')),
),
),
section(
'sec-menu',
'下拉菜单',