在前端开发中，很多时候我们需要使用调查问卷来收集用户数据。而要制作一个漂亮、易用的调查问卷并不容易，特别是对于不太擅长设计的开发者来说。此时，借助现成的 npm 包可以轻松地解决这一问题，而本文就将为大家介绍一个非常实用的 npm 包 —— bulma-survey，并分享如何使用该包制作漂亮的调查问卷。
1. 什么是 bulma-survey
bulma-survey 是基于 Bulma CSS 框架的一款可定制的调查问卷组件。bulma-survey 包含了丰富的问题类型（单选、多选、文本、滑块等），而且可以实现多个分组调查问卷，并在收集数据后让用户导出所收集到的数据。
2. 安装和使用
2.1 安装
--- ------- ------------
或者通过 Yarn 安装：
---- --- ------------
2.2 使用
要使用该 npm 包，首先需要加载它：
------ ------ ---- ---------------
----------------------------- -
----------- - ------ --
--在加载后，我们就可以开始创建调查问卷。要创建调查问卷，我们需要准备好一个如下的数据：
-
------ -------------
------------ ----------
-------- -
-
------ ------
----- ---------
--------- -----
-------- -
------
------
------
-
--
-
------ ------
----- -------
--------- -----
------------ --------
---------- ----
--
--
------- -
------ -----
--
-然后，我们可以这样使用该数据来创建调查问卷：
------- ----------------------
至此，我们已经成功使用 bulma-survey 创建了一个简单的问卷调查。不过，上述的数据只是非常基础的使用方法，下面我们来分别详细介绍一下各个部分。
3. 数据结构
3.1 标题和描述
-
------ -------------
------------ ----------
-上述代码的 title 和 description 分别是调查问卷的标题和描述。根据实际情况，可以自行调整。
3.2 问题配置
-
----- ----------- ------- ------- ------------ ----- ------ ----
------ -------- ----
--------- ------- ----
------------- ----- ---
-------- -
------
------
------
---- ----------------
----- ---- ------------------
------------ ---------- --------------------
---------- ------ ----------------------
--上述代码是一个问题的配置，我们可以根据实际情况自行调整各个属性。bulma-survey 支持的问题类型包括: choose, multiChoose（多选题），text（单行文本题）以及 slider（滑块）。而每种问题类型又都代表了不同的问题类型，具体为：
| 类型 | 对应问题 |
|---|---|
| choose | 单选题 |
| multiChoose | 多选题 |
| text | 单行文本 |
| slider | 滑块题 |
值得注意的是，options 属性的值只有在选择题和多选题下才会有，为一个数组，用来设置选项的值。而 rows 属性则是指文本题或多行文本题中需要输入内容的行数。最后， placeholder 和 maxLength 属性用来设置文本框的提示文本和最大长度限制。
3.3 提交按钮
-
------- -
------ -----
--
-上述代码是用来设置提交按钮的文字。
4. 自定义样式
bulma-survey 采用了 Bulma CSS 框架，因此可以修改 Bulma 的样式来实现自定义样式。我们可以通过修改以下类名来实现样式的自定义：
| 类名 | 说明 |
|---|---|
| .survey | 调查问卷外部容器 |
| .question | 问题外部容器 |
| .question-title | 问题标题 |
| .question-description | 问题描述 |
| .required | 必填项标记 |
| .question-answer | 问题答案 |
| .question-answer-radio | 单选题样式 |
| .question-answer-checkbox | 多选题样式 |
| .question-answer-text | 文本题样式 |
| .question-answer-slider | 滑块题样式 |
| .submit-button-wrapper | 提交按钮容器 |
| .submit-button | 提交按钮 |
例如，在回答单选题时，我们想要选项依次上下排列，而不是默认的左右排列，可以这样同时修改 .question 和 .question-answer-radio 两个类：
--------- -
--------------- -------
-
---------------------- -
--------------- -------
-5. 示例代码
下面是一个包含多种题型的 bulma-survey 示例代码：
------- --------
------ ---------------
------------ ---
------- -
-
------ ------
------------ ---
---------- -
-
----- ---------
------ ------
--------- -----
-------- -
------
------
------
--
--
-
----- --------------
------ ------
--------- ------
-------- -
------
------
------
--
--
-
----- -------
------ ------
--------- -----
------------ --------
---------- ----
--
-
----- ---------
------ ------
--------- -----
------ --- -----
--
--
--
-
------ ------
------------ ---
---------- -
-
----- ---------
------ -------
--------- -----
-------- -
------
------
------
--
--
-
----- -------
------ -------
--------- -----
------------ --------
---------- ----
--
--
--
--
------- -
------ -----
--
------------
--------
------ ------ ---- ---------------
----------------------------- -
----------- - ------ --
---
---------6. 总结
通过本文的介绍，我们可以见识到 bulma-survey 的丰富功能和优雅的设计，它可以极大地简化制作调查问卷的流程，对于想要快速制作漂亮的调查问卷的人来说尤其方便。与此同时，我们也分享了如何通过修改类名来自定义样式，以及如何使用该 npm 包来制作一个多种类型题目组成的调查问卷。相信随着 bulma-survey 的普及，它会在未来更加便捷、灵活地服务我们的工作与学习。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8dccdc64669dde54c2