什么是 merlin-feedback？
merlin-feedback 是一个基于 React 开发的前端组件库，用于快速实现常见的反馈功能。该组件库包含多个组件，包括弹出框、消息提示、评分和反馈表单等，可大大减少开发反馈功能的时间和成本。
安装和使用
首先，在终端中进入项目的根目录，执行以下命令安装 merlin-feedback：
npm install merlin-feedback --save
接着，在需要使用 merlin-feedback 的组件中，导入 merlin-feedback 的相关组件，并在需要使用的地方进行调用即可，示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ------------ - ---- ------------------
----- ------------ ------- --------------- -
----- - - ---------- ----- --
--------------- - -- -- -
--------------- ---------- ---- ---
--
---------------- - -- -- -
--------------- ---------- ----- ---
--
---------------- - ---------- -- -
----------------------
------------------------
--
-------- -
------ -
-----
------- ----------------------------------------------
--------------
------------
------------------------------
-------------------------------
-
------------- -------------------------------- --
----------------
------
--
-
-在上述示例中，我们通过导入 merlin-feedback 的组件 FeedbackModal 和 FeedbackForm，并在 FeedbackModal 中嵌套 FeedbackForm 来构建一个反馈弹窗。其中，handleOpenModal、handleCloseModal 和 handleSubmitForm 分别为打开、关闭反馈弹窗以及提交反馈表单的事件处理函数。
组件列表及使用说明
FeedbackModal
反馈弹窗组件，提供一个弹出式的反馈表单。
props
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| title | string | 是 | - | 反馈弹窗标题 |
| visible | boolean | 是 | - | 是否显示反馈弹窗 |
| onClose | () => void | 是 | - | 关闭反馈弹窗的回调函数 |
| width | number/string | 否 | 520 | 反馈弹窗宽度 |
| className | string | 否 | - | 反馈弹窗的自定义样式类名 |
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ------------------
----- ------------ ------- --------------- -
----- - - ---------- ----- --
--------------- - -- -- -
--------------- ---------- ---- ---
--
---------------- - -- -- -
--------------- ---------- ----- ---
--
-------- -
------ -
-----
------- ----------------------------------------------
--------------
------------
------------------------------
-------------------------------
-----------
---------------------------------
-
--- ------ ---
----------------
------
--
-
-FeedbackForm
反馈表单组件，提供一个用于提交反馈信息的表单，包括反馈类型、联系方式和反馈内容。
props
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| onSubmit | (formData) => void | 是 | - | 提交反馈表单数据的回调函数 |
| feedbackTypes | array/object/string | 否 | [] | 反馈类型数据，用户可自定义反馈类型及其选项 |
| inputProps | object | 否 | - | 各输入框的属性，包括 placeholder、disabled 等等 |
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- ------------------
----- ------------ ------- --------------- -
---------------- - ---------- -- -
----------------------
--
-------- -
------ -
-----
-------------
--------------------------------
----------------
-
----- -------
-------- -------- ------- --------
--
-
----- -------
-------- ------- ------- --------
--
--
-------------
------ - ------------ --------- --
------ - ------------ --------- --
--
--
------
--
-
-Message
消息提示组件，用于快速输出各种类型的消息提示。
props
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| type | string | 否 | info | 消息提示类型，可选值为 info、success、warning 和 error |
| text | string | 是 | - | 消息提示文本 |
| onClose | () => void | 否 | - | 关闭消息提示的回调函数 |
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------------
----- ------------ ------- --------------- -
----------------- - ------ -- -
------ ------ -
---- -------
-------------------------
------
---- ----------
----------------------------
------
---- ----------
----------------------------
------
---- --------
--------------------------
------
--------
------
-
--
-------- -
------ -
-----
------- ----------- -- ---------------------------------------------
------- ----------- -- ------------------------------------------------
------- ----------- -- ------------------------------------------------
------- ----------- -- ----------------------------------------------
------
--
-
-StarRating
星级评分组件，用于用户对某些事物进行星级评分。
props
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| value | number | 是 | - | 星级评分的初始值 |
| max | number | 否 | 5 | 星级评分的最大值 |
| disabled | boolean | 否 | false | 是否禁用星级评分 |
| onChange | (value) => void | 否 | - | 星级评分改变的回调 |
| allowHalf | boolean | 否 | false | 是否允许半星评分 |
| character | React.ReactNode | 否 | ★ | 星级评分的图标 |
| characterCls | string | 否 | - | 星级评分图标的样式 |
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------
----- ------------ ------- --------------- -
----- - - ------- --- --
------------------ - ------- -- -
--------------- ------- ----- ---
--
-------- -
------ -
-----
--------------------------- -----
----------- ------------------------- ---------------------------------- --
------
--
-
-总结
在本文中，我们介绍了 npm 包 merlin-feedback 的使用方法，包括安装和使用以及各组件的使用说明。通过学习本文，您将能够快速实现常见的反馈功能，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040b81