在这个数字化的时代，表情包已成为人们日常交流中重要的一个组成部分。为了方便在前端中使用表情，我们可以使用 npm 包 emojione-new-picker。本文将为大家介绍如何使用 emojione-new-picker，并提供使用示例。
什么是 emojione-new-picker？
emojione-new-picker 是一个基于 emojione 的表情选择器组件。它支持多种表情类型，可以自定义表情分类，同时还支持输入框中的实时搜索和键盘输入触发表情选择器的功能。
如何使用 emojione-new-picker？
安装
我们可以使用 npm 安装 emojione-new-picker：
$ npm i emojione-new-picker
引入
在需要使用 emojione-new-picker 的文件中，先引入样式文件：
import 'emojione-new-picker/dist/emojione-new-picker.css'
然后，再引入组件：
import { EmojioneNewPicker } from 'emojione-new-picker'
使用
使用 emojione-new-picker 需要进行一些配置。我们可以参考以下示例代码来了解如何使用：
-- -------------------- ---- -------
----------
-----
------ ----------- ---------------------- -------------------- ----------------------
-------------------- ------------
------------------------
---------------------
---------------------
--------------------
-------------------
------------------------
---------------------------- ----------- ---- -------- --
------
-----------
--------
------ - ----------------- - ---- ----------------------
------ ------- -
----------- - ----------------- --
------ -
------ -
------------- ---
----------- -
- ----- --------- ------ --------- ------ --------- ------ --------- ----------- -------- ----------- --
- ----- ----------------- ------ -------- - -------- ------ ------- ------ ---------- ------ ------------ ----------
- ----- ------------- ------ ----- - ------- ------ --------- ------------ ------- ------- -------------- -----------
- ----- ----------- ------ ----------- ------ ---------- --------- ----------- ------------- ---------- -----------------
- ----- ---------------- ------ ------- - -------- ------ ------------ -------- ----------- ------ ----------- ---------
- ----- ---------- ------ ---------- ------ -------- --------------------- --------------- --------- ------------ --------------
- ----- ---------- ------ ---------- ------ --------- -------------- ----------- -------------- -------------------- --------------
- ----- -------- ------ -------- ------ ----------- ---------- ---------- ---------- ---------- -----------
-
-
--
-------- -
--------- -
-------------------------------
--
--------- -
-------------------------------
--
--------------- -
----------------- -- ------
--
--------------- -
------------------- -------- -----------
-
-
-
---------在上述示例代码中，我们定义了一个 input 标签，当鼠标悬浮在 input 上时，触发 showPicker 方法显示表情选择器，当鼠标离开 input 时，触发 hidePicker 方法隐藏表情选择器。我们还定义了 categories 数组，包含了表情分类的相关信息。在 onSelect 方法中，我们将选中的 emoji 即时显示在 input 中。在 onSearch 方法中，我们可以做一些搜索相关的操作。
总结
通过上述示例代码，我们可以轻松地使用 emojione-new-picker 将表情加入我们的前端应用中，并定制一些自己的表情分类。如果您发现 emojione-new-picker 使用过程中存在问题或者需要优化的地方，可以参与其 GitHub 项目，提出您的建议或者进行贡献。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be481e8991b448e59b0