Mention 提及

在输入过程中通过 @ 等前缀提及某人或某事，适合评论、消息、协作场景。

import { createApp } from 'vue'
import { ElMention } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElMention)

基础用法

输入 @ 即可弹出候选列表，从中选择对应选项。

Textarea

将 Mention 作为多行文本域使用，设置 type="textarea"。

自定义标签

通过 label 插槽自定义每条候选的渲染内容。

加载远程选项

通过 loading 和 search 事件配合远程接口异步加载选项。

自定义触发字段

通过 prefix 设置自定义的触发字符，支持数组形式同时启用多个前缀。

整体删除

设置 whole 为 true，退格时把整个被提及的内容作为一个整体删除。

API

Attributes

属性	说明	类型	默认值
model-value / v-model	输入值	string	—
options	候选选项	MentionOption[]	[]
prefix	触发字符	string / string[]	@
split	分隔符	string	' '
loading	是否为加载状态	boolean	false
whole	退格时整体删除	boolean	false
check-is-whole	自定义是否整体删除的逻辑	Function	—
filter-option	自定义过滤函数或 false 关闭过滤	false / Function	—
placement	下拉位置	string	bottom

Events

事件	说明
search	触发字符被按下时触发
select	选中候选时触发
whole-remove	整体删除提及时触发

Slots

名称	说明
label	自定义候选项渲染
loading	自定义加载内容
header / footer	下拉菜单头部 / 底部

更多属性请查阅 Element Plus Mention。