Mention 提及

用于在输入中提及某人或某事，支持多前缀触发、异步加载、自定义过滤、头像描述展示等功能。

基础用法

输入 @ 触发下拉菜单，选择后自动插入提及内容：

内容：暂无

多前缀触发

设置 prefix 为数组，输入 @ 提及用户，输入 # 触发话题：

内容：暂无

带头像和描述

选项支持 avatar 和 description 字段，下拉列表自动展示头像与描述信息：

内容：暂无

自定义渲染

使用 #option 插槽完全自定义下拉选项的渲染方式：

内容：暂无

自定义过滤

通过 filter 属性自定义搜索逻辑，此处实现拼音首字母匹配：

内容：暂无

异步加载

设置 loading 属性展示加载状态，配合 search 事件实现异步搜索：

内容：暂无

整行模式

设置 whole 后，选中时插入 option.value 而非 option.label：

内容：暂无

不同尺寸

设置 size 属性使用三种预设尺寸：

可清空、字数统计与禁用

clearable 显示清空按钮，maxlength + showCount 显示字数统计，disabled 禁用输入：

0 / 100

API

参数	类型	默认值	说明
`modelValue`	`string`	`''`	绑定值（v-model）
`options`	`MentionOption[]`	`[]`	提及选项数组
`prefix`	`string \| string[]`	`'@'`	触发提及的前缀符号，支持数组传入多个前缀
`placeholder`	`string`	`'输入 @ 提及'`	占位文本
`disabled`	`boolean`	`false`	是否禁用
`readonly`	`boolean`	`false`	是否只读
`rows`	`number`	`3`	文本域行数
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	输入框尺寸
`loading`	`boolean`	`false`	是否显示加载状态
`filter`	`(pattern: string, option: MentionOption) => boolean`	`—`	自定义过滤函数，返回 true 表示匹配
`placement`	`'bottom-start' \| 'bottom' \| 'top-start' \| 'top'`	`'bottom-start'`	下拉菜单弹出位置
`whole`	`boolean`	`false`	整行模式，选中时插入 option.value 而非 option.label
`clearable`	`boolean`	`false`	是否可清空
`maxlength`	`number`	`—`	最大输入长度
`showCount`	`boolean`	`false`	是否显示字数统计（需配合 maxlength）
`emptyText`	`string`	`'无匹配结果'`	无匹配选项时的提示文字

事件名	类型	说明
`update:modelValue`	`(value: string) => void`	值变化时触发
`select`	`(option: MentionOption, prefix: string) => void`	选择提及项时触发，第二个参数为触发前缀
`search`	`(pattern: string, prefix: string) => void`	搜索时触发，可用于异步加载选项
`focus`	`(event: FocusEvent) => void`	获得焦点时触发
`blur`	`(event: FocusEvent) => void`	失去焦点时触发

插槽名	说明
`option`	自定义下拉选项渲染，参数 { option, index }

方法名	类型	说明
`focus`	`() => void`	使文本域获得焦点
`blur`	`() => void`	使文本域失去焦点