iter(g238): 新增 highlight 关键词高亮,命中片段包 mark 并随信号实时联动(75 组件)

This commit is contained in:
HIsheR
2026-10-26 21:35:18 +08:00
parent 5f150dccaa
commit 226271986e
12 changed files with 150 additions and 10 deletions
+27 -1
View File
@@ -88,7 +88,8 @@
"pinInput(props):验证码输入,N 格单字符数字输入,输入自动进格、退格回删、方向键移格、粘贴自动分发,value 信号双向绑定,mask 可密文显示",
"copyButton(props):复制按钮,点击把 text 写入剪贴板并短暂显示已复制,text 可传函数取实时值,clipboard API 不可用时降级 execCommand",
"countdown(props):倒计时,秒级递减到 0 自动停表并触发 onFinish,缺省 mm:ss 展示,返回句柄 start/stop/reset",
"kbd(props):键盘按键标记,键帽样式展示单个按键或组合键(多键以 + 连接),用于快捷键提示"
"kbd(props):键盘按键标记,键帽样式展示单个按键或组合键(多键以 + 连接),用于快捷键提示",
"highlight(props):关键词高亮,命中片段包 mark(大小写不敏感全部命中),text / keyword 支持信号响应式刷新"
],
"keyTypes": [
"ButtonProps",
@@ -3866,6 +3867,31 @@
"传数组展示组合键:kbd({ keys: [\"Ctrl\", \"K\"] }),键帽之间以弱化的 + 连接(+ 对读屏隐藏)",
"常与提示文案混排:行内 baseline 对齐,键帽底边加厚一线出立体感"
]
},
{
"id": "highlight",
"title": "关键词高亮 Highlight",
"demo": "sec-highlight",
"props": [
{
"n": "text",
"t": "string | Signal<string>",
"r": 1,
"d": "原文;传信号则随信号变化响应式重画"
},
{
"n": "keyword",
"t": "string | Signal<string>",
"r": 1,
"d": "关键词(大小写不敏感、全部命中,首尾空白忽略);空串不高亮、原样展示"
}
],
"example": "highlight({ text: 'Alpha Beta', keyword: 'beta' })",
"steps": [
"传 text + keyword 即可,命中片段以淡黄 mark 底展示,适合搜索结果 / 补全列表的匹配说明",
"两个入参都接受信号:搜索框输入实时联动高亮,无需手动重渲染",
"大小写不敏感且全部命中(非只第一处);关键词两侧空白自动忽略"
]
}
]
}