Vue @提及功能完全指南：三步打造企业级交互体验

2026-05-02 10:11:29作者：何将鹤

你是否遇到这些业务痛点？

在协作平台中@同事分配任务时，用户希望实时显示成员列表；社交应用评论区需要支持@好友功能；电商平台客服系统需快速@关联订单处理人。这些场景都需要流畅的@提及交互，但实现过程中往往面临匹配延迟、样式兼容性、无障碍访问等挑战。本文将通过"问题-方案-进阶"三段式结构，带你从零构建符合企业级标准的Vue @提及功能。

第一步：核心原理与基础实现

如何解决@触发与匹配机制？

@提及功能的核心在于三大技术点：触发字符监听、文本解析匹配和候选列表渲染。当用户输入"@"字符时，插件需要立即捕获输入位置，解析上下文文本提取关键词，然后异步匹配成员数据并展示候选列表。

Vue @提及功能原理流程图 图1：@提及功能核心原理，包含输入监听、文本解析、数据匹配和UI渲染四个环节

基础实现只需三步：

安装适配Vue版本的依赖

# Vue3项目
npm install vue-at@next

引入组件并配置成员数据

<template>
  <at :members="members">
    <div :contenteditable="true"></div>
  </at>
</template>

<script>
import At from 'vue-at'

export default {
  components: { At },
  data() {
    return {
      members: ['技术部-张三', '产品部-李四', '设计部-王五']
    }
  }
}
</script>

选择输入模式（富文本/文本框） 图2：Content-Editable模式下的@成员选择界面，支持头像展示和实时搜索（alt文本：Vue组件@功能富文本模式展示）

第二步：功能优化与场景适配

性能优化实现技巧

当成员数据超过1000条时，直接全量渲染会导致列表卡顿。优化方案包括：

虚拟滚动列表：仅渲染可视区域内的选项，通过vue-virtual-scroller实现
防抖搜索：使用lodash.debounce控制输入频率，延迟500ms触发搜索
数据缓存：对已搜索结果进行缓存，避免重复请求

图3：Textarea模式下的简洁@选择界面，适合电商客服系统（alt文本：Vue组件@功能文本框模式展示）

无障碍访问实现方案

为确保屏幕阅读器用户正常使用@功能，需添加：

ARIA属性：为候选列表添加role="listbox"，选项添加role="option"
键盘导航：支持↑↓键选择，Enter键确认，Esc键关闭列表
焦点管理：@面板打开时自动聚焦第一个选项，关闭后返回输入框

第三步：高级定制与行业案例

电商场景定制方案

在电商订单备注功能中，需要@关联商品和客户：

<template>
  <at 
    :members="members" 
    :filter-method="customFilter"
    name-key="fullname"
  >
    <template v-slot:item="props">
      <img :src="props.item.avatar" class="avatar">
      <div>
        <div>{{ props.item.fullname }}</div>
        <div class="tag">{{ props.item.role }}</div>
      </div>
    </template>
    <textarea v-model="orderNote"></textarea>
  </at>
</template>