在前端开发中，我们经常需要使用到文字输入框或富文本编辑器，而在其中又经常需要实现 @ 提醒功能，以便用户可以方便地选择某一个特定的用户进行提醒。
为了实现这一功能，我们可以使用一个叫做 mentions 的 npm 包。在本文中，我们将介绍如何使用这个包来实现基础的 @ 提醒功能，并提供一些使用示例，以帮助您快速上手。
安装
在开始之前，我们需要先安装 mentions。我们可以通过 npm 来将这个包作为项目的依赖进行安装，只需要在命令行中输入以下命令：
npm install mentions --save
使用
在完成了安装之后，我们就可以在代码中使用了。我们需要导入 MentionsInput 和 Mention 两个组件：
import { MentionsInput, Mention } from 'mentions';有了这两个组件，我们就可以在代码中使用它们了。我们需要在代码中编写一个 <MentionsInput> 元素 - 该元素包含了我们的富文本编辑器，并具有一些特定的属性来设置提醒功能。例如：
-- -------------------- ---- -------
--------------
------------------------ -- --------
---------------------------- -- -------------
-------------------- -- --------
-
--------
-----------
------------------------ -- -- - -------
-------- ---------------- --------- --
----------------------------------------
--
----------------在上面的代码中，我们使用了一个 <Mention> 元素，该元素设置了 trigger="@u"，并且提供了一个由组件内部维护的 data 列表，用于匹配所输入的字符。
我们还可以对 <MentionsInput> 元素进行其他的配置，例如：
onFocus/onBlur：输入框聚焦和失焦时的回调函数；onKeyDown/onKeyUp：输入框按键按下和弹起时的回调函数；className/style：更改组件的 CSS 样式。
提供数据
为了正确地提供数据，我们需要提供一个包含了所有可以被 @ 提醒的用户列表。该列表必须是一个数组的形式，其中每个成员都是一个对象，具有以下属性：
id：用户的唯一 ID；display：用于显示在建议框中的用户名称；username：真实的用户名。
以下是一个可以作为数据源的 JSON 对象的例子：
-- -------------------- ---- -------
-
-
----- ----
---------- ------
----------- ------------
--
-
----- ----
---------- -----
----------- --------
--
-
----- ----
---------- -----
----------- -------
--
-
----- ----
---------- ------
----------- -----------
--
-
----- ----
---------- ------
----------- -------------
--
-
----- ----
---------- ------
----------- -------------
--
-
----- ----
---------- -----
----------- ---------
--
-
----- ----
---------- -----
----------- ---------
--
-
----- ----
---------- -----
----------- -----------
-
-可选配置项
mentions 还提供了一些可选的配置项，以帮助开发者更好地控制组件的行为。下面是我们可以使用的所有配置项：
allowSpaceInQuery：当为true时，用户可以在查询文字中输入空格；singleLine：当为true时，调整输入框，以使其只能显示一行；suggestionsPortalHost：建议框的父元素；textareaComponent: 使用的<textarea>组件；displayTransform：在“@XX”被选中之后，你想重新输入建议中的内容或其他文字的方法可以在此处指定；style：指定外观；- 其他默认属性：
divClassname,forceSuggestions,ignoreAccents,inputClassname,inputStyle,maxSuggestionsLength,minChars,onKeyUpChangeDelay,placeholder,scrollIntoView,scrollFocusedIntoView,suggestionsClassname,suggestionsContainerClassname,suggestionPanelClassname,trigger,value,classNames。
示例代码
以下是一个完整的使用示例，它在输入框中实现了一个基础的 @ 用户提醒功能：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - -------------- ------- - ---- -----------
----- ---- - -
-
--- ----
-------- ------
--------- ----------------
--
-
--- ----
-------- --------
--------- ------------------
--
-
--- ----
-------- ------- -------
--------- ------------------
--
-
--- ----
-------- ---------
--------- -------------------
--
-
--- ----
-------- ------ ---- -------
--------- ----------------
--
-
--- ----
-------- -------- ------
--------- -----------------
--
-
--- ----
-------- ---- ----
--------- ------------------
--
--
----- ------------ ------- --------- -
------------------ -
-------------
---------- - -
------ ---
------- ---
--
-
-------------------- -
--------------- ------- ---- ---
-
------------ - ------- -- -
--------------- ------ ------------------ ---
--
-------- -
------ -
--------------
------------------------
----------------------------
----------------------
-
-------- ----------- ------------------------ --
----------------
--
-
-
------ ------- -------------结论
在本文中，我们介绍了 npm 包 mentions 的使用教程及示例代码。通过使用这个包，我们可以轻松地实现 @ 提醒功能，使我们的前端开发更加高效和便捷。希望这篇文章对您有所帮助，愿您开发愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040b97