Mention 提及

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

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

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

基础用法

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

<template>
  <el-mention
    v-model="value"
    :options="options"
    placeholder="输入 @ 来提及某人"
    style="width: 300px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Mention as ElMention } from '@szhn/dh-design-pc'


const value = ref('')
const options = ref([
  { value: 'Alice', label: 'Alice' },
  { value: 'Bob', label: 'Bob' },
  { value: 'Charlie', label: 'Charlie' },
])
</script>

Textarea

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

<template>
  <el-mention
    v-model="value"
    type="textarea"
    :options="options"
    placeholder="输入 @ 提及某人"
    :rows="3"
    style="width: 360px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Mention as ElMention } from '@szhn/dh-design-pc'


const value = ref('')
const options = [
  { value: 'Alice', label: 'Alice' },
  { value: 'Bob', label: 'Bob' },
  { value: 'Charlie', label: 'Charlie' },
]
</script>

自定义标签

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

<template>
  <el-mention v-model="value" :options="options" placeholder="@ 试试" style="width: 320px">
    <template #label="{ item }">
      <div style="display: flex; align-items: center; gap: 8px;">
        <span
          :style="{
            width: '24px', height: '24px', borderRadius: '50%',
            background: item.color, color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: '12px',
          }"
        >{{ item.label.charAt(0) }}</span>
        <span>{{ item.label }}</span>
      </div>
    </template>
  </el-mention>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Mention as ElMention } from '@szhn/dh-design-pc'


const value = ref('')
const options = [
  { value: 'Alice', label: 'Alice', color: 'var(--dh-color-primary, #409eff)' },
  { value: 'Bob', label: 'Bob', color: 'var(--dh-color-success, #67c23a)' },
  { value: 'Cathy', label: 'Cathy', color: 'var(--dh-color-warning, #e6a23c)' },
]
</script>

加载远程选项

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

<template>
  <el-mention
    v-model="value"
    :options="options"
    :loading="loading"
    placeholder="@ 后输入关键词"
    style="width: 320px"
    @search="handleSearch"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Mention as ElMention } from '@szhn/dh-design-pc'


const value = ref('')
const loading = ref(false)
const options = ref<{ value: string; label: string }[]>([])

const pool = ['Alice', 'Amanda', 'Bob', 'Brian', 'Cathy', 'Chris', 'Diana']

function handleSearch(query: string) {
  loading.value = true
  setTimeout(() => {
    options.value = pool
      .filter((u) => u.toLowerCase().includes(query.toLowerCase()))
      .map((u) => ({ value: u, label: u }))
    loading.value = false
  }, 400)
}
</script>

自定义触发字段

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

<template>
  <el-mention
    v-model="value"
    :options="options"
    :prefix="['@', '#']"
    placeholder="输入 @ 或 # 试试"
    style="width: 320px"
    @search="onSearch"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Mention as ElMention } from '@szhn/dh-design-pc'


const value = ref('')
const userOptions = [
  { value: 'Alice', label: 'Alice' },
  { value: 'Bob', label: 'Bob' },
]
const topicOptions = [
  { value: 'vue', label: 'Vue' },
  { value: 'dhdesign', label: 'DHdesign' },
]
const options = ref(userOptions)

function onSearch(_q: string, prefix: string) {
  options.value = prefix === '#' ? topicOptions : userOptions
}
</script>

整体删除

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

<template>
  <el-mention
    v-model="value"
    :options="options"
    whole
    placeholder="整体删除提及"
    style="width: 320px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Mention as ElMention } from '@szhn/dh-design-pc'


const value = ref('Hi @Alice ')
const options = [
  { value: 'Alice', label: 'Alice' },
  { value: 'Bob', label: 'Bob' },
]
</script>

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。