在我们开发 Web 应用时，经常需要在用户之间进行交流。例如用户之间可以在评论区里互相回复、提及别人等等。而在处理这些消息的交互中，就需要我们使用一些前端库来帮助我们实现。
在这篇文章中，我们将介绍 mentionable 这个 npm 包。它是一个用于在输入框中提供提及功能的库。
mentionable 是什么？
如果你了解一些社交应用或者论坛，你应该知道提及功能。用户输入 @ 符号，接着输入用户名，然后点击搜索或者回车，就可以成功提及一个用户。
mentionable 是一个 npm 包，它提供了一个非常简单的方法，在你的应用中实现类似的提及功能。该包为输入框提供了自动补全和高亮等功能，同时允许您使用回调函数或异步事件处理程序在用户提及特定用户时执行操作。
mentionable 的安装和使用
使用 npm 安装 mentionable，只需要在终端中输入以下命令：
npm install mentionable
安装完成之后，在你的 JavaScript 文件中引入 mentionable：
import Mentionable from 'mentionable'
然后，你可以使用以下代码来实例化你的输入框：
const mentionable = new Mentionable(document.querySelector('textarea'))在这个例子中，我们将 textarea 元素传递给 Mentionable，所以该库可以为输入框添加提及功能。
现在，我们已经成功实例化了提及输入框，让我们来看一下如何使用它。首先，我们需要预定义一个用户列表：
const users = [
{ name: 'Tom', id: 'tom' },
{ name: 'Jerry', id: 'jerry' },
{ name: 'Spike', id: 'spike' },
{ name: 'Tyke', id: 'tyke' }
]然后我们把用户数据传递给 Mentionable 实例，这样 mentionable 在输入框中将会根据这个列表自动补全用户：
mentionable.setUsers(users)
你可能会使用更多的配置选项来适应你的应用：
const mentionable = new Mentionable(document.querySelector('textarea'), {
prefix: '@',
triggerChar: ' ',
onSelect: (user) => console.log(`You selected user ${user.name} (${user.id})`)
})现在，就有了一个带自动补全提及功能的输入框。
mentionable API
mentionable 提供了很多 API，下面列出一些常用的 API：
setUsers(users: Array<User>): void
设置用户列表以供 mentionable 使用。
参数：
users：用户列表。
on(eventType: string, callback: Function): void
绑定事件处理程序到 mentionable 实例。
参数：
eventType：事件类型，可选值有change、select、highlight和dismiss。callback：事件回调函数。
off(eventType: string, callback: Function): void
解绑事件处理程序。
参数：
eventType：事件类型，可选值有change、select、highlight和dismiss。callback：回调函数。
dismiss(): void
隐藏提及列表。
highlight(index: number): void
高亮指定的用户在提及列表中。
参数：
index：要高亮的用户的索引。
select(): void
选择当前高亮的用户。
getCaretPosition(): number
获取输入框光标在输入框的位置。
setText(text: string): void
直接设置输入框的值。
参数：
text：要设置的文本。
示例代码
下面给出一个示例，演示了 mentionable 库如何使用：
-- -------------------- ---- -------
---------------------
------- --------------
------ ----------- ---- -------------
----- ----- - -
- ----- ------ --- ----- --
- ----- -------- --- ------- --
- ----- -------- --- ------- --
- ----- ------- --- ------ -
-
----- ----------- - --- ----------------------------------------------- -
------- ----
------------ - --
--------- ------ -- ---------------- -------- ---- ------------ --------------
--
---------------------------
---------总结
Mentionable 是一个支持提及用户功能的 npm 包，它允许你在文本框中使用“@”符号自动补全用户，并在回调函数中处理提及操作。这个包在社交应用中非常有用，因为它允许用户之间进行轻松的交流和交换信息，并帮助我们减轻了很多交互的负担。
在这篇文章中，我们介绍了 mentionable 的安装和使用，同时也列出了 mentionable 提供的 API。希望这篇文章能对开发提及功能的前端工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040b96