ant-design-vue/components/mentions/index.en-US.md

2.6 KiB

category type title cover coverDark
Components Data Entry Mentions https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e4bXT7Uhi9YAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*pxR2S53P_xoAAAAAAAAAAAAADrJ8AQ/original

Mention component.

When To Use

When you need to mention someone or something.

API

Mention

Property Description Type Default
autofocus Auto get focus when component mounted boolean false
defaultValue Default value string
filterOption Customize filter option logic false | (input: string, option: OptionProps) => boolean
getPopupContainer Set the mount HTML node for suggestions () => HTMLElement
notFoundContent Set mentions content when not match string | slot 'Not Found'
placement Set popup placement top | bottom bottom
prefix Set trigger prefix keyword string | string[] '@'
split Set split string before and after selected mention string ' '
status Set validation status 'error' | 'warning' | 'success' | 'validating' - 3.3.0
validateSearch Customize trigger search logic (text: string, props: MentionsProps) => void
value(v-model) Set value of mentions string
options Option Configuration Options [] 4.0
option custom option label v-slot:option="option" - 4.0

Events

Events Name Description Arguments
blur remove focus function
change Trigger when value changed function(value: string)
focus get focus function
search Trigger when prefix hit function(value: string, prefix: string)
select Trigger when user select the option function(option: OptionProps, prefix: string)

Mention methods

Name Description
blur() remove focus
focus() get focus

Mention.Option (< 4.0)

Property Description Type Default
value value of suggestion, the value will insert into input filed while selected string ''

Option

Support from v4.0

Property Description Type Default
value value of suggestion, the value will insert into input filed while selected string -
label Title of the option VueNode () => VueNode
disabled Optional boolean -
class className string -
style The style of the option CSSProperties -
payload other data object -