Mention

A component used to trigger a mention (@) candidate list during text input, supporting custom trigger characters, matching modes, and rendering templates.

Component Features

• 🛠️ Multiple Match Modes: Supports prefix matching (prefix), exact matching (exact), and fuzzy matching (fuzzy).
• ⌨️ Multiple Trigger Characters: Allows custom single or multiple trigger characters (like @, #).
• 🖱️ High Adaptability: Compatible with standard inputs, textareas, and content-editable elements (like rich text editors).
• 🎨 Custom Rendering: Supports customizing the display of mention candidate list items via slots.

Basic Usage

The most basic mention display, using prefix matching mode.

Example

Fuzzy Matching & Textarea

Using fuzzy matching in a textarea with a set maximum height.

Example

Custom Triggers & List Items

Supports multiple trigger characters (such as @, #) and custom list item content display.

Example

ContentEditable Integration

Using the mention component inside a contenteditable element, which is very common in rich text scenarios.

Example

Theme Customization

Combined with BrConfigProvider, you can globally override the default styles of the component, such as modifying theme colors and border radius, and deeply customize the highlight style of the selected item using the highlightClass property.

Example

API Reference

BrMention

Prop	Type	Default	Description
trigger	string | string[]	'@'	Trigger character(s)
options	MentionOption[]	-	Candidate list data
matchMode	'prefix' | 'exact' | 'fuzzy'	'prefix'	Match mode
position	'auto' | 'top' | 'bottom' | 'left' | 'right'	'auto'	Candidate list pop-up direction
delay	number	0	Trigger delay in ms
disabled	boolean	false	Whether the mention is disabled
loading	boolean	false	Loading state
maxHeight	string | number	-	Maximum height of the candidate list
isolated	boolean	false	Whether to enable style isolation
showEmpty	boolean	true	Whether to show the empty state
highlightClass	string	-	Custom class name for highlight style

MentionOption Data Structure

Prop	Type	Default	Description
label	string	-	Text content displayed for the option
value	string	-	Value of the option
disabled	boolean	false	Whether the option is disabled
description	string	-	Additional description text
avatar	string	-	Avatar URL of the option
[key: string]	any	-	Supports extending custom properties

Emits

Event	Parameters	Description
search	(query: string, trigger: string)	Triggered when search text changes
select	(option: MentionOption, trigger: string)	Triggered when an option is selected
open-change	(open: boolean)	Triggered when candidate list opens/closes

Slots

BrMentionContent

Slot Name	Parameters	Description
item	{ option: MentionOption, active: boolean }	Custom candidate list item rendering