---
name: element-plus-mention
description: Element Plus Mention component (el-mention) API documentation. Triggers when user wants to use, implement, or asks about el-mention or Mention component.
---

# Mention 组件 API

## Attributes

| Name                                 | Description                                                                            | Type                                                                         | Default                                                  |
| ------------------------------------ | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------- |
| options                              | mention options list                                                                   | ^[array]`MentionOption[]`                                                    | `[]`                                                     |
| props ^(2.11.3)                      | configuration options                                                                  | ^[object]`MentionOptionProps`                                                | `{value: 'value', label: 'label', disabled: 'disabled'}` |
| prefix                               | prefix character to trigger mentions. The string length must be exactly 1              | ^[string] \| ^[array]`string[]`                                              | `'@'`                                                    |
| split                                | character to split mentions. The string length must be exactly 1                       | ^[string]                                                                    | `' '`                                                    |
| filter-option                        | customize filter option logic                                                          | ^[false] \| ^[Function]`(pattern: string, option: MentionOption) => boolean` | —                                                        |
| placement                            | set popup placement                                                                    | ^[string]`'bottom' \| 'top'`                                                 | `'bottom'`                                               |
| show-arrow                           | whether the dropdown panel has an arrow                                                | ^[boolean]                                                                   | `false`                                                  |
| offset                               | offset of the dropdown panel                                                           | ^[number]                                                                    | `0`                                                      |
| whole                                | when backspace is pressed to delete, whether the mention content is deleted as a whole | ^[boolean]                                                                   | `false`                                                  |
| check-is-whole                       | when backspace is pressed to delete, check if the mention is a whole                   | ^[Function]`(pattern: string, prefix: string) => boolean`                    | —                                                        |
| loading                              | whether the dropdown panel of mentions is in a loading state                           | ^[boolean]                                                                   | `false`                                                  |
| model-value / v-model                | input value                                                                            | ^[string]                                                                    | —                                                        |
| popper-class                         | custom class name for dropdown panel                                                   | ^[string] / ^[object]                                                        | ''                                                       |
| popper-style ^(2.11.5)               | custom style for dropdown panel                                                        | ^[string] / ^[object]                                                        | —                                                        |
| popper-options                       | [popper.js](https://popper.js.org/docs/v2/) parameters                                 | ^[object] refer to [popper.js doc](https://popper.js.org/docs/v2/)           | —                                                        |
| [input props](./input.md#attributes) | —                                                                                      | —                                                                            | —                                                        |

## Events

| Name                              | Description                                                                                 | Type                                                         |
| --------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| search                            | trigger when prefix hit                                                                     | ^[Function]`(pattern: string, prefix: string) => void`       |
| select                            | trigger when user select the option                                                         | ^[Function]`(option: MentionOption, prefix: string) => void` |
| whole-remove ^(2.10.4)            | trigger when a whole mention is removed and `whole` is `true` or `check-is-whole` is `true` | ^[Function]`(pattern: string, prefix: string) => void`       |
| [input events](./input.md#events) | —                                                                                           | —                                                            |

## Slots

| Name                            | Description                           | Type                                              |
| ------------------------------- | ------------------------------------- | ------------------------------------------------- |
| label                           | content as option label               | ^[object]`{ item: MentionOption, index: number }` |
| loading                         | content as option loading             | —                                                 |
| header                          | content at the top of the dropdown    | —                                                 |
| footer                          | content at the bottom of the dropdown | —                                                 |
| [input slots](./input.md#slots) | —                                     | —                                                 |

## Exposes

| Name                     | Description                   | Type                                    |
| ------------------------ | ----------------------------- | --------------------------------------- |
| input                    | el-input component instance   | ^[object]`Ref<InputInstance \| null>`   |
| tooltip                  | el-tooltip component instance | ^[object]`Ref<TooltipInstance \| null>` |
| dropdownVisible ^(2.8.5) | tooltip display status        | ^[object]`ComputedRef<boolean>`         |

## 参考

- 官方文档: https://element-plus.org/en-US/component/mention.html