仅桌面端保证样式
Mention 输入提及
在文本域中输入触发前缀(默认 @)唤起候选面板,选中后插入提及标记。适用于评论、工单指派、公告 @ 成员等场景。支持键盘导航(↑ ↓ 回车 Esc)。
基础用法
输入 @ 唤起面板,继续输入过滤,回车或点击选中:
modelValue:(空)
自定义触发前缀
prefix 可换成 #(话题)、/(指令)等;split 控制选中后的分隔符:
对象候选与事件
候选支持 { value, label } 对象(label 缺省用 value);search 在过滤时触发,select 在选中时触发:
最近选中:(无);最近过滤词:(无)
Mention API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | String | '' | 输入内容(v-model) |
| options | Array | [] | 候选:string[] 或 { value, label? }[] |
| prefix | String | '@' | 触发前缀 |
| split | String | ' ' | 选中插入后的分隔符('' 不追加) |
| placeholder | String | '' | 占位文案 |
| rows | Number | 3 | 文本域行数 |
| disabled | Boolean | false | 禁用 |
Events
| 名称 | 参数 | 说明 |
|---|---|---|
| update:modelValue | (value) | 输入内容变化 |
| search | (query) | 触发面板后每次过滤输入 |
| select | (option) | 选中候选 |