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 | 触发提及的前缀字符。字符串长度必须为 1 | string | array | '@' |
| split | 用于分割提及的字符。字符串长度必须为 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 文档 | — |
| 输入框 props | — | — | — |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| search | 命中前缀时触发 | Function |
| select | 用户选择选项时触发 | Function |
| whole-remove 2.10.4 | 当整个提及被删除且 `whole` 为 `true` 或 `check-is-whole` 为 `true` 时触发 | Function |
| 输入框 events | — | — |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| label | 作为选项标签的内容 | object |
| 加载中 | 作为选项加载中的内容 | — |
| header | 下拉列表顶部的内容 | — |
| footer | 下拉列表底部的内容 | — |
| 输入框 slots | — | — |
暴露
| 名称 | 描述 | 类型 |
|---|---|---|
| input | el-input 组件实例 | object |
| tooltip | el-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
}