简介
npm 包 emoji-feedback 是一个简单易用、美观大方、支持多种表情的前端反馈组件。它可以帮助开发者更加便捷地为自己的网站或应用添加反馈功能，支持用户点击表情以及提交反馈文字，还含有自定义样式和回调函数等功能，可以帮助开发者更加灵活地应对各种反馈需求。
安装
使用 npm 进行安装：
npm install emoji-feedback --save
用法
在您的页面中引入 emoji-feedback 组件：
-- -------------------- ---- -------
------
----- ---------------- -----------------------------------------------------------
-------
------
---- --------------------
------- ------------------------------------------------------------------
--------
--- -------- - --- ---------------
--- ------------
-- -----
---
---------
-------以上代码中，我们首先在 head 中引入了 css 文件，然后在 body 中创建了一个 div 容器，并在 body 末尾引入了 js 文件并创建了 emoji-feedback 对象。其中，el 选项表示 emoji-feedback 组件的容器。
配置项
在创建 EmojiFeedback 对象时，我们可以通过一些配置项进行对组件的设置。
表情列表
表情列表可以通过 emojiMaps 配置项进行设置，该配置项的格式如下：
-- -------------------- ---- -------
-
------ -
------ --------
------ --
---- -------
--
-------- -
------ ----------
------ --
---- ---------
--
---- -
------ ------
------ --
---- -----
-
-每一个表情都包含了一个 label 属性，用于显示表情名称，一个 index 属性，表示表情在表情列表中的位置，以及一个 css 属性，表示表情所采用的样式。
提交按钮文本
submitText 选项设置提交按钮的文本。
{
submitText: '提交反馈'
}成功回调函数
afterSubmit 是一个回调函数，会在提交反馈成功之后执行。
{
afterSubmit: function(res) {
console.log(res);
}
}样式自定义
可以通过 cssClasses 选项进行样式自定义。
-- -------------------- ---- -------
-
----------- -
-------- -----------------
------ ---------------
------ ---------------
------ ---------------
------- ---------------
-
-方法
表情点击
当用户点击某一表情时，会触发 feedback 对象的 onEmojiClick 方法，并会传入被点击的表情对象。
feedback.onEmojiClick = function(emoji) {
// do something
};表单提交
当用户提交反馈表单时，会触发 feedback 对象的 submit 方法，并将表单中的文字及选中的表情传入其中。
feedback.submit = function(emojiIndex, desc) {
// do something
};示例
-- -------------------- ---- -------
------
----- ---------------- -----------------------------------------------------------
-------
------
---- --------------------
------- ------------------------------------------------------------------
--------
--- -------- - --- ---------------
--- ------------
---------- -
------ -
------ -----
------ --
---- -------
--
-------- -
------ -----
------ --
---- ---------
--
---- -
------ -----
------ --
---- -----
-
--
----------- -----
----------- -
-------- -------------------
------ -----------------
------ -----------------
------ -----------------
------- -----------------
--
------------ ------------- -
-----------------
-
---
--------------------- - --------------- -
------------------- -------------
--
--------------- - -------------------- ----- -
---------------------- ------------------------------------- -------- ------
--
---------
-------以上代码演示了 emoji-feedback 组件的基本使用方法。该组件实现了对表情的选择和对反馈内容的提交，并且支持了自定义样式和回调函数等功能。通过学习该组件的使用方法，开发者可以更加便捷地为自己的网站或应用添加反馈功能，提升用户体验，增加产品价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562c981e8991b448e00d6