0.0.4

Mention 提及 ​

在输入框中 @ 提及某人或某物。

基础用法 ​

最简用法。

字段映射 ​

可通过 props 自定义 options 的字段别名。

文本域 ​

输入类型可设为 textarea。

自定义标签 ​

通过 label 插槽自定义选项标签。

远程加载选项 ​

异步加载候选项。

自定义触发前缀 ​

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

整体删除 ​

将 whole 设为 true 时，按退格可整体删除提及片段；可用 check-is-whole 自定义判断逻辑。

与表单配合 ​

与 u-form 组合使用。

name
desc

TIP

本组件基于 u-input 封装，输入相关属性与原生行为保持一致，此处不再重复，详见输入框文档。

提及 API ​

提及 属性 ​

名称说明类型默认值
options候选项列表array[]
props字段映射配置object{value: 'value', label: 'label', disabled: 'disabled'}
prefix触发提及的前缀字符，长度须为 1；或字符串数组string | array'@'
split分隔提及的字符，长度须为 1string' '
filter-option自定义过滤逻辑；传 false 可关闭内置过滤false | Function—
placement弹出层位置string'bottom'
show-arrow下拉是否显示箭头booleanfalse
offset下拉层偏移number0
whole退格删除时是否整体删除提及内容booleanfalse
check-is-whole退格删除时自定义是否视为整体提及Function—
loading下拉是否处于加载态booleanfalse
model-value / v-model输入值string—
popper-class下拉自定义类名string / object''
popper-style下拉自定义样式string / object—
popper-optionsPopper.js 参数object 参考 Popper 文档—
输入框属性———

提及 事件 ​

名称说明类型
search匹配到前缀时触发Function
select选择候选项时触发Function
whole-remove整体删除提及时触发（whole 或 check-is-whole 生效时）Function
输入框事件——

提及 插槽 ​

名称说明类型
label选项标签内容object
loading加载态内容—
header下拉顶部内容—
footer下拉底部内容—
输入框插槽——

提及 暴露 ​

名称说明类型
input输入框组件实例引用object
tooltip文字提示组件实例object
dropdownVisible下拉是否可见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
}