npm 包 @kelabang/emojione-picker 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@kelabang/emojione-picker 是一款基于 Emojione 的表情选择器 npm 包，可以方便地在前端页面中插入表情。

本文章将为大家介绍该 npm 包的使用教程，并提供相关的示例代码，以便大家更好地学习和指导。

安装

使用 npm 包管理器，可以很方便地安装 @kelabang/emojione-picker 包，只需要执行以下命令即可：

npm install @kelabang/emojione-picker

使用方法

1. 引入样式文件和脚本文件

在要使用该包的页面中，需要在 head 标签中引入该包提供的样式文件和脚本文件：

<head>
  <link href="/node_modules/@kelabang/emojione-picker/dist/index.css" rel="stylesheet" type="text/css" />

  <script src="/node_modules/@kelabang/emojione-picker/dist/index.js"></script>
</head>

2. 创建表情选择器容器

在页面上创建一个元素（例如一个 div），作为表情选择器的容器，代码示例如下：

<div id="emoji-container"></div>

3. 初始化表情选择器

在页面加载完毕后，可以使用以下代码将表情选择器初始化，并将其绑定到指定的容器上：

const emojionePicker = new window.EmojionePicker({
  wrapper: 'emoji-container',
});
emojionePicker.render();

4. 设置表情选择器的回调函数

在初始化表情选择器时，如果需要在选择表情后执行一些自定义代码，则需要设置表情选择器的回调函数，代码示例如下：

const emojionePicker = new window.EmojionePicker({
  wrapper: 'emoji-container',
  onClick: (data) => {
    console.log('[Picker] on click', data);
  },
});
emojionePicker.render();

5.获取表情选择器的选择结果

当用户在表情选择器中选择了一个表情后，可以通过表情选择器的回调函数获取其选择结果，选择结果的格式如下：

{
  unicode: '1F601',
  name: 'grinning face with smiling eyes'
}

unicode 表示表情的 UNICODE 编码，name 表示表情的名称。

示例代码

完整的示例代码如下，可以直接运行，测试该包的效果：

-- -------------------- ---- -------
--------- -----
------
------
  --------------- ------ ------------

  ----- --------------- --

  ----- ------------------------------------------------------------- ---------------- --------------- --

  ------- ---------------------------------------------------------------------

  --------
    ------------- - -------- -- -
      ----- -------------- - --- -----------------------
        -------- ------------------

        -------- ------ -- -
          --------------------- -- ------- ------
        --
      ---

      ------------------------
    -
  ---------

  -------
    ---------------- -
      ------ ------
      ------- ------
      ------- --- ----- -----
      -------- -----
    -
  --------
-------
------
  ---- ---------------------------
-------
-------

总结

本文为大家介绍了 npm 包 @kelabang/emojione-picker 的使用方法，并提供了完整的示例代码。希望本文能够帮助到大家，同时也希望大家能够掌握 Emojione 的相关技术，开发更加丰富多彩的前端页面。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065b48c6eb7e50355dbf44