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.

name
desc

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

NameDescriptionTypeDefault
optionsmention options listarray[]
prefixprefix character to trigger mentions. The string length must be exactly 1string | array'@'
splitcharacter to split mentions. The string length must be exactly 1string' '
filter-optioncustomize filter option logicfalse | Function
placementset popup placementstring'bottom'
show-arrowwhether the dropdown panel has an arrowbooleanfalse
offsetoffset of the dropdown panelnumber0
wholewhen backspace is pressed to delete, whether the mention content is deleted as a wholebooleanfalse
check-is-wholewhen backspace is pressed to delete, check if the mention is a wholeFunction
loadingwhether the dropdown panel of mentions is in a loading statebooleanfalse
model-value / v-modelinput valuestring
popper-classcustom class name for dropdown panelstring
popper-optionspopper.js parametersobject refer to popper.js doc
input props

Events

NameDescriptionType
searchtrigger when prefix hitFunction
selecttrigger when user select the optionFunction
input events

Slots

NameDescriptionType
labelcontent as option labelobject
loadingcontent as option loading
headercontent at the top of the dropdown
footercontent at the bottom of the dropdown
input slots

Exposes

NameDescriptionType
inputel-input component instanceobject
tooltipel-tooltip component instanceobject
dropdownVisible 2.8.5tooltip display statusobject

Type Declarations

Show declarations
ts
type MentionOption = {
  value: string
  label?: string
  disabled?: boolean
  [key: string]: any
}

Fuente

ComponentesStyleDocumentación

Contribuidores