老实说，

在 Vue 项目中实现“@”提及功能时最常遇到的痛点包括：

• 如何让输入框在键入“@”时弹出实时建议列表？
• 建议列表与文本内容的定位和交互如何精准同步？
• 如何将提及的数据持久化为富文本而不是纯字符串？
• 兼容 Element Plus 的提及组件，但它无法直接处理富文本。

从主要思路来看，tiptap 的 Mention 插件 + Floating UI 定位

tiptap 提供了高度可配置的 Mention 结合 @floating-ui/vue 可以比较容易做到定位、滚动加载等交互。下面给出完整可直接使用的代码示例，并说明关键点。

1️⃣ 初始化编辑器 & 引入依赖

2️⃣ 定义接口与工具类型

/** 可能是 Promise 的类型 */
export type MaybePromise = T | Promise;export interface Suggestion {
说到id，string;label: string;}

3️⃣ 配置 Mention 插件

🔑 小贴士：

• onStart / onUpdate： 在这两个回调里更新定位信息。 保证弹窗位置跟随光标，
• 键盘导航： 用 `selectedIndex` 控制高亮项，配合 `scrollIntoView` 保证视图可见。
• @Mention 插件自带删除回退功能：`deleteTriggerWithBackspace:true` 可以让使用者按 Backspace 删除 @ 提及。

4️⃣ 定位弹窗与浮动元素

⚠️ 注意点：

• `useFloating` 与 `reference` 必须对应同一 DOM 节点。否则弹窗会错位，
• `autoPlacement` 防止弹窗被遮挡，支持多种位置选择。
• `isMentionVisible` 用于判断是否需要渲染弹窗，提高性能。

5️⃣ 编辑器实例与双向绑定

痛点一：返回的是 HTML，而非纯文本；如果你只想要纯文本，需要自行解析或使用正则匹配。但 tiplang 为富文本场景提供了最合适的方案。

6️⃣ 渲染模板

小技巧： 利用 `` 的 `end-reached` 回调可以实现无限滚动加载更多建议，提高 UX。

7️⃣ 辅助函数：递归查找所有提及节点

function findMention {
if return;if){
doc.forEach);return，}
const{type,content,attrs}=doc||{};if{
result.push;return，}
if{
content.forEach);}
}

8️⃣ 样式

.editor{
再看border，.5px solid #ccc;border-radius:.375rem;padding:.5rem .75rem
}
.editor .mention{color:#409eff;}
.popper{
position:absolute;按理说，background:white;border-radius:.25rem;padding:.25rem
}
.list button{
padding:.25rem .35rem;margin-bottom:.1rem;border:none，background:none;color:#333
}
.list button:hover{background:#f0f0f0}
.list button.active{background:#409eff;其实，color:white}

💡如果你遇到“@ 后没有触发建议”。请检查： - 是否已正确引入 @tiptap/extension-mention - 是否在 内包裹了相应的 CSS - 是否开启了 allowedPrefixes:null 或根据需求调整前缀过滤

祝编码愉快 🚀