终极指南：如何在 React 和 Vue 中集成 At.js 实现智能提及功能

终极指南：如何在 React 和 Vue 中集成 At.js 实现智能提及功能

【免费下载链接】At.jsAdd Github like mentions autocomplete to your application.项目地址: https://gitcode.com/gh_mirrors/at/At.js

At.js 是一款强大的前端库，能够为你的应用添加类似 GitHub 的智能提及（mention）自动完成功能。无论是社交平台、协作工具还是内容管理系统，集成 At.js 都能让用户在输入时获得流畅的提及体验，大幅提升产品交互性。

🚀 为什么选择 At.js？核心优势解析

At.js 作为轻量级提及解决方案，具备三大核心优势：

• 高度可定制：支持自定义触发字符（如 @、#）、数据来源和显示样式
• 跨框架兼容：无缝集成 React、Vue 等现代前端框架
• 性能优化：高效的输入检测和结果过滤算法，确保流畅体验

🔧 快速开始：At.js 基础安装与配置

1. 环境准备

首先通过 Git 克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/at/At.js

2. 核心文件引入

At.js 的核心实现位于 src/ 目录，主要包含：

• src/api.coffee：提供核心 API 接口
• src/controller.coffee：处理输入事件和自动完成逻辑
• src/view.coffee：渲染自动完成下拉列表
• src/jquery.atwho.css：基础样式文件

⚛️ React 集成方案：从基础到高级

基础实现步骤

1. 安装依赖：

npm install at.js jquery

2. 组件封装：

import React, { useRef, useEffect } from 'react'; import $ from 'jquery'; import 'at.js/dist/css/jquery.atwho.css'; import 'at.js'; const MentionInput = () => { const inputRef = useRef(null); useEffect(() => { const $input = $(inputRef.current); $input.atwho({ at: "@", data: ["Alice", "Bob", "Charlie"] }); return () => $input.atwho('destroy'); }, []); return <input ref={inputRef} placeholder="Type @ to mention..." />; };

高级特性配置

通过 src/default.coffee 可以查看完整配置选项，常用高级配置包括：

• limit：限制显示结果数量
• displayTpl：自定义结果显示模板
• callbacks：钩子函数（如选择后回调）

🖖 Vue 集成方案：组件化实现

Vue 2 实现

<template> <textarea v-model="content" ref="mentionInput"></textarea> </template> <script> import $ from 'jquery'; import 'at.js/dist/css/jquery.atwho.css'; import 'at.js'; export default { data() { return { content: '' }; }, mounted() { $(this.$refs.mentionInput).atwho({ at: "#", data: ["bug", "feature", "enhancement"] }); }, beforeDestroy() { $(this.$refs.mentionInput).atwho('destroy'); } }; </script>

Vue 3 组合式 API

<template> <input ref="input" v-model="message" /> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; import $ from 'jquery'; import 'at.js/dist/css/jquery.atwho.css'; import 'at.js'; const input = ref(null); const message = ref(''); onMounted(() => { $(input.value).atwho({ at: "@", data: ["Vue", "React", "Angular"] }); }); onBeforeUnmount(() => { $(input.value).atwho('destroy'); }); </script>

🎨 自定义样式与交互优化

At.js 提供了丰富的样式定制能力，通过修改 src/jquery.atwho.css 可以实现品牌化外观：

/* 自定义提及文本样式 */ .atwho-inserted { color: #2563eb; font-weight: bold; } /* 自定义下拉菜单 */ .atwho-view { border: 1px solid #e5e7eb; border-radius: 0.375rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

📝 实战案例：常见使用场景

1. 社交媒体平台

在评论区实现 @用户 功能，参考 examples/hashtags.html 中的实现方式：

$('#comment-input').atwho({ at: "@", data: "/api/users", // 从后端API获取用户数据 searchKey: "username" });

2. 协作编辑工具

结合富文本编辑器使用，如 TinyMCE 或 Medium Editor，项目提供了 examples/tinyMCE.html 和 examples/medium-editor.html 参考示例。

🔍 故障排除与常见问题

问题1：自动完成不触发

检查是否正确引入了 jQuery 和 Caret.js 依赖，At.js 需要这两个库的支持。相关依赖配置可参考 bower.json 和 package.json。

问题2：在框架中事件冲突

确保在组件卸载时调用$(element).atwho('destroy')清理事件监听，避免内存泄漏。

📚 深入学习资源

• 完整 API 文档：src/api.coffee
• 测试用例：spec/javascripts/
• 更多示例：examples/

通过本指南，你已经掌握了在 React 和 Vue 项目中集成 At.js 的核心方法。无论是简单的提及功能还是复杂的自定义场景，At.js 都能提供稳定高效的解决方案，为你的应用增添专业的用户体验。

【免费下载链接】At.jsAdd Github like mentions autocomplete to your application.项目地址: https://gitcode.com/gh_mirrors/at/At.js