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