iter(g244): 新增 inputTag 标签输入组件,回车成标签并支持满额禁输
This commit is contained in:
@@ -89,7 +89,8 @@
|
||||
"copyButton(props):复制按钮,点击把 text 写入剪贴板并短暂显示已复制,text 可传函数取实时值,clipboard API 不可用时降级 execCommand",
|
||||
"countdown(props):倒计时,秒级递减到 0 自动停表并触发 onFinish,缺省 mm:ss 展示,返回句柄 start/stop/reset",
|
||||
"kbd(props):键盘按键标记,键帽样式展示单个按键或组合键(多键以 + 连接),用于快捷键提示",
|
||||
"highlight(props):关键词高亮,命中片段包 mark(大小写不敏感全部命中),text / keyword 支持信号响应式刷新"
|
||||
"highlight(props):关键词高亮,命中片段包 mark(大小写不敏感全部命中),text / keyword 支持信号响应式刷新",
|
||||
"inputTag(props):标签输入,输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个,value 信号双向绑定,max 满额自动禁输"
|
||||
],
|
||||
"keyTypes": [
|
||||
"ButtonProps",
|
||||
@@ -3898,6 +3899,69 @@
|
||||
"两个入参都接受信号:搜索框输入实时联动高亮,无需手动重渲染",
|
||||
"大小写不敏感且全部命中(非只第一处);关键词两侧空白自动忽略"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "inputTag",
|
||||
"title": "标签输入 InputTag",
|
||||
"demo": "sec-inputtag",
|
||||
"props": [
|
||||
{
|
||||
"n": "value",
|
||||
"t": "Signal<string[]>",
|
||||
"r": 1,
|
||||
"d": "已选标签集合,双向绑定:成标签与删 chip 都写回信号"
|
||||
},
|
||||
{
|
||||
"n": "placeholder",
|
||||
"t": "string",
|
||||
"r": 0,
|
||||
"d": "未满时的占位文案;缺省「输入后回车添加」"
|
||||
},
|
||||
{
|
||||
"n": "max",
|
||||
"t": "number",
|
||||
"r": 0,
|
||||
"d": "最多允许的标签条数;缺省 0 表示不限,满额后输入框禁用并提示上限"
|
||||
},
|
||||
{
|
||||
"n": "maxLength",
|
||||
"t": "number",
|
||||
"r": 0,
|
||||
"d": "单个标签最大字符数;缺省 24,超出直接截断"
|
||||
},
|
||||
{
|
||||
"n": "allowDuplicate",
|
||||
"t": "boolean",
|
||||
"r": 0,
|
||||
"d": "是否允许重复标签;缺省 false(重复的静默丢弃)"
|
||||
},
|
||||
{
|
||||
"n": "disabled",
|
||||
"t": "boolean | Signal<boolean>",
|
||||
"r": 0,
|
||||
"d": "禁用态:布尔或信号,true 时不可输入也不可删"
|
||||
},
|
||||
{
|
||||
"n": "ariaLabel",
|
||||
"t": "string",
|
||||
"r": 0,
|
||||
"d": "输入框无障碍标签;缺省「标签输入」"
|
||||
},
|
||||
{
|
||||
"n": "onChange",
|
||||
"t": "(tags: string[]) => void",
|
||||
"r": 0,
|
||||
"d": "标签集合变化回调,参数是变化后的完整集合"
|
||||
}
|
||||
],
|
||||
"example": "const tags = signal(['前端', '设计']);\ninputTag({ value: tags, max: 5, onChange: (list) => console.log(list.length) })",
|
||||
"steps": [
|
||||
"传一个 signal<string[]> 作为 value:回车或逗号把当前输入转成 chip,写回信号后立即重画",
|
||||
"点 chip 上的 × 删除单个标签;输入框为空时按退格键删掉最后一个(手不离键盘也能改)",
|
||||
"输入后直接失焦也会成标签,不必强行回车;max 满额后输入框禁用,占位文案变成「最多 N 个标签」",
|
||||
"要区分大小写重复判断就传 allowDuplicate: true;默认按原样去重",
|
||||
"样式复用输入组与标签:外框聚焦光环、chip 圆角与语义色都跟既有组件一致,无新增视觉字面量"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user