介绍
在前端开发中，常常需要使用到 emoji 表情，在文本输入框中添加 emoji 功能也是用户体验的一部分，我们可以手动添加 emoji 按钮，并通过事件监听实现功能，但这样处理起来比较麻烦。这时，我们就可以使用 npm 包 emoji-selector。
emoji-selector 是一个简单、灵活且易用的 emoji 输入框工具，可以帮助我们快速地完成文本输入框中添加 emoji 功能。
安装
我们可以通过 npm 来安装这个 npm 包：
npm install --save emoji-selector
使用
引入
在需要使用 emoji-selector 的页面或组件中，导入 emoji-selector 包：
import EmojiSelector from 'emoji-selector';
初始化
emoji-selector 的初始化比较简单，只需要传入两个参数：
- selector：传入需要监听的文本输入框的选择器
- options：传入一些配置项，例如按钮图标、emoji 表情包等
-- -------------------- ---- -------
----- ------- - -
------- ----------------
--------- --------
------- -
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
-- ---- ------
-
--
----- ------------- - --- ---------------------------- ---------其中，options 参数包含了以下几个配置项：
- button：传入 emoji-selector 按钮的选择器，用于初始化 emoji-selector 按钮的位置
- position：指定 emoji-selector 按钮的位置，支持 start、center 和 end 三种位置，start 表示在文本输入框前面，center 表示在文本输入框中间，end 表示在文本输入框后面
- emojis：传入 emoji 表情包数组，每个表情包包含 code 和 src 两个属性，分别表示emoji 的 Unicode 码和emoji 的图片地址
事件监听
emoji-selector 为文本输入框添加的 emoji 按钮本身并不能触发点击事件，需要使用事件委托的方式来监听 emoji-selector 按钮的点击事件：
document.addEventListener('click', (e) => {
if (e.target && e.target.id == 'emoji-button') {
emojiSelector.toggle();
}
})这段代码监听了整个文档中的 click 事件，在点击 emoji-selector 按钮时触发 emoji-selector 的 toggle() 方法，用来显示和隐藏 emoji-selector 面板。
显示和隐藏
当我们点击 emoji-selector 按钮时，需要显示和隐藏 emoji-selector 面板，emoji-selector 的 show() 方法和 hide() 方法分别用于显示和隐藏 emoji-selector 面板：
document.addEventListener('click', (e) => {
if (e.target && e.target.id == 'emoji-button') {
emojiSelector.toggle();
} else {
emojiSelector.hide();
}
})在这个示例代码中，当点击 emoji-selector 按钮时，toggle() 方法可以实现面板的显示和隐藏，当点击除 emoji-selector 按钮外的其他区域时，hide() 方法可以隐藏 emoji-selector 面板。
示例代码
接下来给出一个完整的示例代码，供大家参考：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------- ------------
----- ---------------- --------------------------------------------------------------------------
-------
------
-----
--------- ---------------------------
------
------- ---------------------------
------- ------------------------------------------------------------------------------------
--------
------ ------------- ---- -----------------
----- ------- - -
------- ----------------
--------- --------
------- -
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
-- ---- ------
-
--
----- ------------- - --- ---------------------------- ---------
---------------------------------- --- -- -
-- --------- -- ----------- -- --------------- -
-----------------------
- ---- -
---------------------
-
--
---------
-------
-------总结
emoji-selector 是一个简单、灵活且易用的 npm 包，具有较好的用户体验。在前端开发中，我们可以使用 emoji-selector 来完成文本输入框中添加 emoji 的功能。使用 emoji-selector 时，需要初始化 emoji-selector 对象、监听 emoji-selector 按钮的点击事件以及在需要的时候显示或隐藏 emoji-selector 面板。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005670581e8991b448e346b