Mention
Used to mention someone or something in an input.
Basic Usage
The most basic usage.
Props 2.11.3
You can customize the alias of the options through the props attribute.
Textarea
The input type can be set to textarea.
Customize label
Customize label by label slot.
Load remote options
Load options asynchronously.
Customize trigger token
Customize trigger token by prefix props. Default to @, Array<string> also supported.
Delete as a whole
Set the whole attribute to true, and when you press the backspace, the mention will be deleted as a whole. Set the check-is-whole attribute to customize the checking logic.
Work with form
to work with el-form.
TIP
Since this component is developed based on the component el-input , the original properties have not changed, so no repetition here, and please go to the original component to view the documentation.
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| options | mention options list | array | [] |
| props 2.11.3 | configuration options | object | {value: 'value', label: 'label', disabled: 'disabled'} |
| prefix | prefix character to trigger mentions. The string length must be exactly 1 | string | array | '@' |
| split | character to split mentions. The string length must be exactly 1 | string | ' ' |
| filter-option | customize filter option logic | false | Function | — |
| placement | set popup placement | string | '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 | — |
| 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 parameters | object refer to popper.js doc | — |
| input props | — | — | — |
Events
| Name | Description | Type |
|---|---|---|
| search | trigger when prefix hit | Function |
| select | trigger when user select the option | Function |
| whole-remove 2.10.4 | trigger when a whole mention is removed and whole is true or check-is-whole is true | Function |
| input events | — | — |
Slots
| Name | Description | Type |
|---|---|---|
| label | content as option label | object |
| loading | content as option loading | — |
| header | content at the top of the dropdown | — |
| footer | content at the bottom of the dropdown | — |
| input slots | — | — |
Exposes
| Name | Description | Type |
|---|---|---|
| input | el-input component instance | object |
| tooltip | el-tooltip component instance | object |
| dropdownVisible 2.8.5 | tooltip display status | object |
Type Declarations
Show declarations
ts
type MentionOption = {
value?: string
label?: string
disabled?: boolean
[key: string]: any
}
type MentionOptionProps = {
value?: string
label?: string
disabled?: string
[key: string]: string | undefined
}Source
Contributors
