提及

用于在输入框中提及某人或某事。

基础用法

最基础的用法。

属性 2.11.3

你可以通过 props 属性自定义 options 的别名。

文本域

输入框类型可以设置为 textarea。

自定义标签

通过 label 插槽自定义标签。

加载远程配置项

异步加载配置项。

自定义触发字符

通过 prefix 属性自定义触发字符。默认为 @，也支持 Array<string>。

整体删除

将 whole 属性设置为 true，当按下退格键时，提及内容将被整体删除。设置 check-is-whole 属性可以自定义检查逻辑。

在表单中使用

与 el-form 配合使用。

提示

由于此组件是基于 el-input 组件开发的，原始属性没有变化，因此不再赘述，请前往原始组件查看文档。

API

属性

名称	描述	类型	默认值
options	提及配置项列表	`array`	`[]`
属性 2.11.3	配置选项	`object`	`{value: 'value', label: 'label', disabled: 'disabled'}`
prefix	触发提及的前缀字符。字符串长度必须正好为 1	`string` \| `array`	`'@'`
分隔符	用于分割提及内容的字符。字符串长度必须正好为 1	`string`	`' '`
filter-option	自定义过滤配置项逻辑	`false` \| `Function`	—
placement	设置弹出层位置	`string`	`'bottom'`
show-arrow	下拉面板是否带有箭头	`boolean`	`false`
offset	下拉面板的偏移量	`number`	`0`
whole	按下退格键删除时，提及内容是否整体删除	`boolean`	`false`
check-is-whole	按下退格键删除时，检查提及内容是否是一个整体	`Function`	—
加载中	提及下拉面板是否处于加载状态	`boolean`	`false`
model-value / v-model	输入框的值	`string`	—
popper-class	下拉面板的自定义类名	`string` / `object`	''
popper-style 2.11.5	下拉面板的自定义样式	`string` / `object`	—
popper-options	popper.js 参数	`object` 参考 popper.js 文档	—
输入框属性	—	—	—

事件

名称	描述	类型
搜索	当匹配到前缀时触发	`Function`
select	当用户选择配置项时触发	`Function`
whole-remove 2.10.4	当整体提及被移除且 `whole` 为 `true` 或 `check-is-whole` 为 `true` 时触发	`Function`
输入框事件	—	—

插槽

名称	描述	类型
label	作为配置项标签的内容	`object`
加载中	作为配置项加载状态的内容	—
header	下拉列表顶部的内容	—
footer	下拉列表底部的内容	—
输入框插槽	—	—

暴露

名称	描述	类型
input	el-input 组件实例	`object`
tooltip	el-tooltip 组件实例	`object`
dropdownVisible 2.8.5	tooltip 显示状态	`object`

类型声明

显示声明

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

type MentionOptionProps = {
  value?: string
  label?: string
  disabled?: string
  [key: string]: string | undefined
}