iter(g47): 新增 cascader 级联选择组件

This commit is contained in:
HIsheR
2026-10-26 12:10:21 +08:00
parent cdef6050d0
commit d81b724408
12 changed files with 468 additions and 10 deletions
+53 -1
View File
@@ -59,7 +59,8 @@
"upload(props):文件选择,点击或拖拽入列,清单可逐个移除,onChange 回传文件数组(不内置上传请求)",
"notification(props):右下角通知卡片(标题 + 描述 + 操作区),返回 { el, close } 句柄,缺省常驻需手动关闭",
"result(props):结果页,status 四档语义色 + 标题 + 说明 + 操作区,用于提交完成/校验失败等终态",
"transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选"
"transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选",
"cascader(props):级联选择,多列联动面板(悬停下钻 / 点击提交),value 为路径数组信号,changeOnSelect 允许停在中间层,全键盘可操作"
],
"keyTypes": [
"ButtonProps",
@@ -1972,6 +1973,57 @@
"disabled 条目不可勾选、不计入全选基数、也不会被搬运",
"传入 targetKeys 信号即为受控用法,外部写入即可程序化搬运(如「一键全选」)"
]
},
{
"id": "cascader",
"title": "级联选择 Cascader",
"demo": "sec-cascader",
"props": [
{
"n": "options",
"t": "CascaderOption[]",
"r": 1,
"d": "根级选项,children 递归出列,value 逐级拼成路径"
},
{
"n": "value",
"t": "Signal<string[]>",
"d": "选中路径信号;不传则内部维护,传了即外部受控"
},
{
"n": "placeholder",
"t": "string",
"d": "未选时占位文案;缺省「请选择」"
},
{
"n": "separator",
"t": "string",
"d": "路径分隔符;缺省「 / 」"
},
{
"n": "changeOnSelect",
"t": "boolean",
"d": "允许停在中间层;缺省 false 必须选到叶子才提交"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "禁用触发器;支持信号响应式禁用"
},
{
"n": "onChange",
"t": "(path: string[]) => void",
"d": "选中回调(叶子或中间层,传副本)"
}
],
"example": "cascader({ value: areaPath, changeOnSelect: true, options: [{ value: 'east', label: '华东', children: [{ value: 'sh', label: '上海' }] }] })",
"steps": [
"传入嵌套 options,第一列是根级选项,悬停带 children 的项即展开下一列",
"点击叶子提交;changeOnSelect 为 true 时点中间层也提交(适合「省/市」这类粗粒度就够用的场景)",
"value 是路径数组(逐级 value),传信号即受控;触发器文案按 separator 拼接已提交路径",
"键盘:↑↓ 同列移动、→ 下钻、← 回退、Enter/空格 提交、Esc 收起(与弹窗共用一个 Esc 栈)",
"面板空间不足时自动向上翻转;disabled 选项不可点也不会展开下一列"
]
}
]
}