iter(g49): 新增 autoComplete 自动补全组件
This commit is contained in:
+59
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-26T04:11:34.965Z",
|
||||
"generatedAt": "2026-10-26T04:12:36.698Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -190,7 +190,8 @@
|
||||
"result(props):结果页,status 四档语义色 + 标题 + 说明 + 操作区,用于提交完成/校验失败等终态",
|
||||
"transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选",
|
||||
"cascader(props):级联选择,多列联动面板(悬停下钻 / 点击提交),value 为路径数组信号,changeOnSelect 允许停在中间层,全键盘可操作",
|
||||
"splitter(props):可拖拽分栏容器,分隔条支持指针拖拽 / 方向键微调 / 双击复位,sizes 为百分比数组信号"
|
||||
"splitter(props):可拖拽分栏容器,分隔条支持指针拖拽 / 方向键微调 / 双击复位,sizes 为百分比数组信号",
|
||||
"autoComplete(props):输入联想,输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起,options 可传函数做远程联想"
|
||||
],
|
||||
"keyTypes": [
|
||||
"ButtonProps",
|
||||
@@ -2195,6 +2196,62 @@
|
||||
"direction 传 vertical 变为上下分栏,键盘方向键与光标同步切换",
|
||||
"传入 sizes 信号即受控,外部写入可做「预设布局」切换(如 1:1 / 2:1)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "autoComplete",
|
||||
"title": "自动补全 AutoComplete",
|
||||
"demo": "sec-autocomplete",
|
||||
"props": [
|
||||
{
|
||||
"n": "options",
|
||||
"t": "AutoCompleteOption[] | ((q: string) => AutoCompleteOption[])",
|
||||
"r": 1,
|
||||
"d": "候选项:静态列表或按关键字计算的函数(可远程联想)"
|
||||
},
|
||||
{
|
||||
"n": "value",
|
||||
"t": "Signal<string>",
|
||||
"d": "输入值信号;不传则内部维护,传了即外部受控"
|
||||
},
|
||||
{
|
||||
"n": "placeholder",
|
||||
"t": "string",
|
||||
"d": "占位文案,同时作为无障碍名称"
|
||||
},
|
||||
{
|
||||
"n": "emptyText",
|
||||
"t": "string",
|
||||
"d": "无匹配时的提示文案;缺省「无匹配项」"
|
||||
},
|
||||
{
|
||||
"n": "maxItems",
|
||||
"t": "number",
|
||||
"d": "最多展示条数;缺省 8"
|
||||
},
|
||||
{
|
||||
"n": "disabled",
|
||||
"t": "boolean | Signal<boolean>",
|
||||
"d": "禁用输入与弹层"
|
||||
},
|
||||
{
|
||||
"n": "onInput",
|
||||
"t": "(query: string) => void",
|
||||
"d": "每次输入回调,适合触发远程请求"
|
||||
},
|
||||
{
|
||||
"n": "onSelect",
|
||||
"t": "(option: AutoCompleteOption) => void",
|
||||
"d": "选中回调(点击或 Enter)"
|
||||
}
|
||||
],
|
||||
"example": "autoComplete({ value: acValue, placeholder: '输入组件名', options: [{ value: 'dataTable', hint: '表格' }], onSelect: (o) => toast.success(o.value) })",
|
||||
"steps": [
|
||||
"输入任何字符即按包含匹配(忽略大小写)过滤候选,空串时弹层不展开",
|
||||
"↑↓ 在候选间环形移动并高亮,Enter 选中,Esc 收起,Tab 失焦也会收起",
|
||||
"候选行支持右侧 hint(分类 / 拼音),选中后值写回输入框并触发 onSelect",
|
||||
"options 传函数时每次输入都会用当前关键字调用,可在此发起远程请求并返回新数组",
|
||||
"value 传信号即受控:外部写入会同步回填输入框内容"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user