[comp:mentions] add mentions component

[lionnnnn]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Used to mention someone or something in the input, often used for posting, chatting or commenting.

What does the proposed API look like?

ix-mentions

props

// 支持textarea的所有属性

名称	说明	类型	默认值	全局配置	备注
v-model:value	当前输入框值	string	-	-	-
control	控件控制器	string | AbstractControl	-	-	当存在 control 时, 控件将由 AbstractControl 完全控制， 此时 value 会失效
empty	自定义当下拉列表为空时显示的内容	string | EmptyProps | #empty	-	-	-
options	下拉选项列表，可以取代 option插槽	MetionsOption[]	-	-	-
overlayClass	下拉列表的 className 属性	string	-	-	-
prefix	设置触发下拉列表的关键字	string	@	✅	-
filterOption	根据输入的关键字对下拉列表进行筛选	boolean | (searchValue: string, option: MentionsOptionProps) => boolean	true	-	为 true 时使用 defaultFilterFn, 如果使用远程搜索，应该设置为 false
split	设置选中某下拉项后的分隔符	string	' '	✅	-
onBlur	失去焦点时触发	() => void	-	-	-
onChange	输入值改变时触发	(text: string) => void	-	-	-
onFocus	输入框获得焦点时触发	() => void	-	-	-
onResize	调整输入框大小时触发	(width: number, height: number) => void	-	-	-
onSearch	搜索下拉列表时触发	(text: string, prefix: string) => void	-	-	-
onSelect	选择下拉选项时触发	(option: OptionProps, prefix: string) => void	-	-	-

export interface MetionsOption {
  label: string
  value: string
}

const defaultFilterFn: MetionsFilterFn = (value: string, option: MentionsOptionProps) => {
  return option.label.toLowerCase().includes(value.toLowerCase())
}

slot

名称	说明	参数类型	备注
default	下拉列表的具体选项	-	-

methods

名称	说明	类型	备注
blur()	移除输入框的焦点	() => void	-
focus()	聚焦输入框	() => void	-

ix-metions-option

props

名称	说明	类型	默认值	全局配置	备注
label	下拉选项的显示文本	string | #default	-	-	必填项，同时也是被选中后文本框显示的内容
value	下拉选项的选择值	string	-	-	-

[danranVm]

• empty 的类型为 string | EmptyProps | #empty ( Slots 里的 empty 可以删掉)
• 支持一下 filterOption 参考 select 组件
• options 的类型为 MetionsOption[] , 如果可以复用 select 的 option 的话，就是OptionProps
• label 的类型为 string | #default ( Slots 可以删掉)

[lionnnnn]

@danranVm 已经修改完了，再看看吧。