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