Dynamic-Form是一个建立在Vue框架之上的动态表单生成器，提供了一种简单的方法在一个应用上自定义数据输入，并将它们转换为特殊格式的JSON object，它可以被直接提交到API中。这个插件的用途非常广泛，一些实际的用例包括但不限于：
- 管理员面板或配置工具
- 特定数据（如地理位置、时间、电话号码）的输入验证
- 可视化的数据处理和编辑
本文将为你提供一个详细的使用教程，向你展示如何更正规、更方便地使用这个工具！
安装
首先，使用npm安装动态表单生成器的最新版本：
--- ------- ----------------------
接下来，将它在你的Vue项目中导入：
------ -------------- ---- ------------------------- ------------------------
在app.vue模板中添加如下代码引用动态表单生成器组件：
----------
---- ---------
----------------- ---------------- ------------------ --
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
-- ---------
------- -
-
----- ---------
------ -----
------ --------------
-------- -- ------ ------ ------ - -- - ------ ------ ------ - --
--
-
----- -------
------ ------
------ -------------
------------ ---------
--------- -----
---------- ----- -- -------
--
-
----- -----------
------ -----
------ ----------------
-------- -- ------ ------ ------ - -- - ------ ------ ------ - --
-
--
-- ----
--------- --
--
-
--
---------你会发现，我们将用户可选择的一些表单项组成一个条目数组传给Dynamic-Form组件。每个条目必须包含以下配置:
- type: 示明这个条目应该被表示为什么表单元素（例如：select，text, radio，date等等）。
- label: 表单条目的顶部描述文字。
- model: 将此模型与Form data的一个键链接。（我们稍后会看到）。
- options（select和radio期间必须存在）：一个数组包含可供选中的对象，每个对象包含一个label和value键。
- validator：（可选）一个用来检查输入是否正确的简单验证函数。
- 和其它参数：start，step，placeholder，必填项选择，最大长度，最小值等等。
这里仅仅是一些简单的例子，根据参数不同情况需要你自己填写，希望你可以熟练掌握如何自定义表单项。
最后的结果是在app.vue中渲染出一个包含了你自定义表单项的表单。
数据
如果你想让这些表单数据能够在提交时被采取，你的数据结构应该是这样的：
- ------------ --- ----------- --- -------------- --- -- -
表单中每个model原本为undefined，当用户输入数据的时候，model值就会被设置，最终以一个JSON的形式被提交到后台服务器上，后台程序员就可以变换这样的自定义表单数据结构。
总结
现在你已经了解了如何使用Dynamic-Form插件，并可以灵活的自定义表单。本文希望能对你在表单开发中有所启发，如果你有任何问题或反馈，欢迎在评论区留言！全文示例代码如下：
示例代码
----------
---- ---------
----------------- ---------------- ------------------ --
------
-----------
--------
------ -------------- ---- -------------------------
------------------------
------ ------- -
----- ------
------ -
------ -
------- -
-
----- ---------
------ -----
------ --------------
-------- -- ------ ------ ------ - -- - ------ ------ ------ - --
--
-
----- -------
------ ------
------ -------------
------------ ---------
--------- -----
---------- ----- -- -------
--
-
----- -----------
------ -----
------ ----------------
-------- -- ------ ------ ------ - -- - ------ ------ ------ - --
-
--
--------- --
--
-
--
---------参考链接
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d1a81e8991b448dab1a