Mention
Used to mention someone or something in an input.
Basic Usage
The most basic usage.
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 | [] |
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 | — |
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 |
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
}
Fuente
Componentes • Style • Documentación