简介
masciugo-surveyjs-widgets 是一个为 SurveyJS 提供的小部件包，用于增强您的调查问卷功能。本文将选取其中的几个部件进行介绍，以及如何使用这些部件生成问卷。
安装
使用 npm 安装 masciugo-surveyjs-widgets ，命令如下：
npm install masciugo-surveyjs-widgets --save
部件介绍
容器部件
容器部件是一种包含其他部件的部件。本文介绍两种容器部件。
Bootstrap 风格容器
Bootstrap 风格容器专门用于显示调查问卷题目和选项，该包内共有两种：
bootstrapcontainerwidget: 用于显示单列题目；bootstrapRowContainerWidget: 用于以 Grid 网格形式显示题目和选项。
使用方法如下：
Survey.CustomWidgetCollection.Instance.addCustomWidget(new SurveyWidgets.BootstrapContainerWidget("bootstrapcontainerwidget"));
Survey.CustomWidgetCollection.Instance.addCustomWidget(new SurveyWidgets.BootstrapRowContainerWidget("bootstraprowcontainerwidget"));组式容器
组式容器是一种具有较多自定义性的容器部件。以下是该容器可以实现的功能：
- 定义多重前缀和后缀；
- 定义嵌套的问答区；
- 定义题目的标签。
使用方法如下：
var widget = new SurveyWidgets.GroupWidget("groupwidget");
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);输入类型部件
该包中共包含以下 5 种输入类型部件：
数字输入框
数字输入框可以用于填写年龄、身高、体重等数据。
使用方法：
Survey.CustomWidgetCollection.Instance.addCustomWidget(new SurveyWidgets.NumericInputWidget("numericinputwidget"));时间选择器
时间选择器可以用于选择时间和日期。
使用方法：
Survey.CustomWidgetCollection.Instance.addCustomWidget(new SurveyWidgets.TimePickerWidget("timepickerwidget"));选择器
选择器包括下拉菜单和单选框两种，一般用于选择性题目选项。
使用方法：
Survey.CustomWidgetCollection.Instance.addCustomWidget(new SurveyWidgets.DropdownGroupWidget("dropdownticket"));
Survey.CustomWidgetCollection.Instance.addCustomWidget(new SurveyWidgets.RadiogroupWidget("radiogroupwidget"));滑动条
滑动条可以用于填写区间数据。
使用方法：
Survey.CustomWidgetCollection.Instance.addCustomWidget(new SurveyWidgets.SliderWidget("sliderwidget"));如何使用
在示例中，将通过表单集合的形式展示一个 SurveyJS 表单，其中包含值得尝试的代码片段，运行以下命令打开 app/ 目录下的 index.html 查看效果：
npm run start
以下是示例中的代码片段：
<div id="surveyContainer"></div>
-- -------------------- ---- -------
--- -------- - -
---------- --
----- ---------
----- ----------
------ ------- -------- -- --- ----- -- -------- ---- --- --------- ------------
-------- --
------ --
----- --------- ---------
-- -
------ --
----- ----------
-- -
------ --
----- ---------
-- -
------ --
----- -------
-- -
------ --
----- --------- ------
---
----- --
------ -------------
----- -------- -- -----------
-- -
------ ----- ---- -- --------
----- -------- ---- ---- -- -------
-- -
------ ------- ---- --------
----- -------- -- ------ ---- ----- -------- -- --- -------
-- -
------ ----- -- -----
----- -------- -- ---- -- ----
--
--
--
--- ------ - --- -----------------------
-------------------------------------- -------- -
--------------------------------------------------- -
------- -------- - ----------------------------
---
------
---------------------------
--------------------- -------- -
--- ------- - -------------------
------------ - ----------
------------- - -------------
------------ - ------------
---
--- ------ - --- -------------------------------------------------------------------
---------------------------------------------------------------
------ - --- -------------------------------------------------------------------------
---------------------------------------------------------------
------ - --- -----------------------------------------
---------------------------------------------------------------
------ - --- ----------------------------------------------------
---------------------------------------------------------------
------ - --- -------------------------------------------
---------------------------------------------------------------
------ - --- -------------------------------------------------------
---------------------------------------------------------------
------ - --- ---------------------------------------------------
---------------------------------------------------------------
------ - --- ---------------------------------------------------
---------------------------------------------------------------
------------------------------------------- - ---- -------------
--------------------- - ------------
---------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726081e8991b448e88cb