Mention 提及

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

基础用法

最基本的使用。

Props 2.11.3

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

文本域

输入框类型可以设置为 textarea

自定义标签

通过 label 插槽自定义标签。

加载远程选项

异步加载选项。

自定义触发标记

通过 prefix 属性自定义触发标记。默认为 @,也支持 Array<string>

整体删除

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

与表单一起使用

el-form 一起使用。

提示

由于此组件是基于 el-input 组件开发的,原始属性没有改变,因此这里不再重复,请到原始组件查看文档。

API

属性

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

事件

名称描述类型
search命中前缀时触发Function
select用户选择选项时触发Function
whole-remove 2.10.4当整个提及被删除且 `whole` 为 `true` 或 `check-is-whole` 为 `true` 时触发Function
输入框 events

插槽

名称描述类型
label作为选项标签的内容object
加载中作为选项加载中的内容
header下拉列表顶部的内容
footer下拉列表底部的内容
输入框 slots

暴露

名称描述类型
inputel-input 组件实例object
tooltipel-tooltip 组件实例object
dropdownVisible 2.8.5工具提示显示状态object

类型声明

显示声明
ts
type MentionOption = {
  value?: string
  label?: string
  disabled?: boolean
  [key: string]: any
}

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

来源

组件样式文档

贡献者