Mention 提及

用于在文本输入时触发提及（@）候选列表的组件，支持自定义触发字符、匹配模式和渲染模板。

组件特性

• 🛠️ 多匹配模式：支持前缀匹配（prefix）、完全匹配（exact）和模糊匹配（fuzzy）。
• ⌨️ 多触发字符：支持自定义单一或多个触发字符（如 @、#）。
• 🖱️ 高适应性：兼容普通输入框（Input）、文本域（Textarea）以及类富文本编辑器（ContentEditable）。
• 🎨 自定义渲染：支持通过插槽自定义提及候选列表项的展现形式。

基础用法

最基础的提及展示，使用前缀匹配模式。

Example

模糊匹配与文本域

在文本域中使用模糊匹配，并设置最大高度。

Example

自定义触发字符与列表项

支持多触发字符（@、# 等）以及自定义列表项的内容展示。

Example

ContentEditable 集成

在 contenteditable 元素中使用提及组件，这在富文本场景中非常常见。

Example

主题定制

结合 BrConfigProvider，可以全局覆盖组件默认样式，例如修改主题色和圆角，并配合 highlightClass 属性深度定制选中项的高亮样式。

Example

API 说明

BrMention

属性	类型	默认值	说明
trigger	string | string[]	'@'	触发字符
options	MentionOption[]	-	候选列表数据
matchMode	'prefix' | 'exact' | 'fuzzy'	'prefix'	匹配模式
position	'auto' | 'top' | 'bottom' | 'left' | 'right'	'auto'	候选列表弹出的方向
delay	number	0	触发延迟时间(ms)
disabled	boolean	false	是否禁用
loading	boolean	false	是否为加载中状态
maxHeight	string | number	-	候选列表最大高度
isolated	boolean	false	是否开启样式隔离
showEmpty	boolean	true	是否展示空状态
highlightClass	string	-	选中的高亮样式定制类名

MentionOption 数据结构

属性	类型	默认值	说明
label	string	-	选项显示的文本内容
value	string	-	选项的值
disabled	boolean	false	是否禁用该选项
description	string	-	额外描述文本
avatar	string	-	选项的头像地址
[key: string]	any	-	支持扩展自定义属性

事件 (Emits)

事件名	参数	说明
search	(query: string, trigger: string)	搜索文本变化时触发
select	(option: MentionOption, trigger: string)	选中候选列表项时触发
open-change	(open: boolean)	候选列表展开/收起时触发

插槽 (Slots)

BrMentionContent

插槽名	参数	说明
item	{ option: MentionOption, active: boolean }	自定义候选列表项渲染