Mentions 提及
输入 @ 触发建议浮层的提及输入组件,适合 @成员 / @任务 等场景。
基础用法
基础用法
输入 @ 后弹出建议列表:↑/↓ 选择、Enter 插入(选中项并入文本),Esc 或点击外部关闭。
关键词过滤
关键词过滤
@ 后继续输入即按 label 过滤,无匹配时显示空态「无匹配提及」。
自定义前缀
prefix
prefix 默认 @,可换成任意触发符(如 #)。
禁用
disabled
disabled 下文本域不可输入、不可触发提及浮层(灰化禁用态)。
无障碍名称(label)
label(可访问名称)
label 作为文本域的可访问名称(aria-label):设置后读屏朗读该名称;未设置时依次回退 placeholder → 内置文案「提及输入框」。
受控值
value(受控)
value 属性为受控通道,外部修改即时同步到文本域。
事件
选择事件
选中建议项后派发 oas-select(detail: { value, label })与 oas-change(detail: { value },为插入后的完整文本):
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabled | 禁用 | boolean | — |
label | 可访问名称(默认走内置文案) | — | — |
options | 选项,JSON 数组 [{ label, value }] | Option[] | string | [] |
placeholder | 占位提示 | string | — |
prefix | 触发前缀 | string | @ |
value | 值(受控,完整文本) | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 插入后文本变化,detail: { value }(完整文本) |
oas-input | — |
oas-select | 选中建议项,detail: { value, label } |
键盘:输入 @ 弹出,↑/↓ 移动高亮,Enter 插入,Esc 关闭。