Skip to content

Mentions 提及

输入 @ 触发建议浮层的提及输入组件,适合 @成员 / @任务 等场景。

基础用法

基础用法

输入 @ 后弹出建议列表:/ 选择、Enter 插入(选中项并入文本),Esc 或点击外部关闭。

关键词过滤

关键词过滤

@ 后继续输入即按 label 过滤,无匹配时显示空态「无匹配提及」。

自定义前缀

prefix

prefix 默认 @,可换成任意触发符(如 #)。

禁用

disabled

disabled 下文本域不可输入、不可触发提及浮层(灰化禁用态)。

无障碍名称(label)

label(可访问名称)

label 作为文本域的可访问名称(aria-label):设置后读屏朗读该名称;未设置时依次回退 placeholder → 内置文案「提及输入框」。

受控值

value(受控)

value 属性为受控通道,外部修改即时同步到文本域。

事件

选择事件

选中建议项后派发 oas-selectdetail: { value, label })与 oas-changedetail: { 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 关闭。