资讯专栏INFORMATION COLUMN

使用form-create轻松生成高品质的form表单[附原理图]

phodal / 1245人阅读

摘要:目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发。使用可快速便捷的生成日常开发中所需的各种表单。可通过后端返回生成规则,进行渲染。

form-create

具有动态渲染、数据收集、校验和提交功能的表单生成器,支持双向数据绑定、事件扩展以及自定义组件,可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。

已兼容iview2.和iview3.版本

Github | 文档 欢迎大家收藏、点赞,多多支持。


form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素。目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发。使用 form-creae 可快速、便捷的生成日常开发中所需的各种表单。




下面向大家介绍一下 form-create 使用方法和生成原理演示 生成器

如何优雅的创建动态生成一个 input 输入框。


内置了规则生成器,用来生成组件规则的助手方法,通过链式操作即可快速生成对应的组件规则。

json

使用 json 数据生成。可通过后端返回生成规则,进行渲染。

php 表单生成器,这是我的另外一个开源项目。通过php生成表单规则,前端可使用 form-create 可直接根据参数进行表单渲染。这样可以很好的做到前后端分离,同时后端也可以很简便的控制表单中的组件和字段。

动态渲染

当生成规则发生变化时,页面也会实时更新。1.5版本新增组件缓存功能,会按需对组件进行更新,很大的提升了渲染速度和性能。

自定义组件

form-create 支持生成任意自定义组件,包括嵌套使用 form-create。

举例

在表单中生成一个 iview 按钮组件

生成 elementUI 组件 参考案例

使用自定义组件可提升表单的灵活性,也可以实现功能更复杂的表单。

实现原理

form-create 组件渲染/更新机制图

form-craete 动态渲染表单机制图

以上就是如何使用 form-create 生成表单生成、动态渲染、自定义组件的说明和演示,以及form-create 项目的生成原理和内部结构。如果您有任何意见或者建议可以通过留言、issue、xaboy2005@qq.com 邮箱来与我联系。✨✨✨

参考

Vue

iviewUI

Vue渲染函数 & JSX

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100297.html

相关文章

  • 自定义表单生成form-create v2介绍

    摘要:介绍是一个可以通过生成具有动态渲染数据收集验证和提交功能的表单生成器。并且支持生成任何组件。结合内置种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。 介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。 文档 | git...

    lufficc 评论0 收藏0
  • 动态生成form表单,不再为表单烦恼

    摘要:具有数据收集校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框单选框输入框下拉选择框等表单元素以及省市区三级联动时间选择日期选择颜色选择滑块评分框架树型文件图片上传等功能组件。 form-create 具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,...

    kamushin233 评论0 收藏0
  • PHP快速生成现代化form表单,就是好用

    摘要:表单生成器,使用快速创建现代化的表单,包含复选框单选框输入框下拉选择框等元素以及省市区三级联动时间选择日期选择颜色选择文件图片上传等功能。 form-builder PHP表单生成器,使用PHP快速创建现代化的form表单,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 Github地址 | Composer地址 ...

    notebin 评论0 收藏0
  • 使用form-create动态生成vue组件,支持json格式

    摘要:说明文档示例商品名称商品加个创建时间是否显示显示不显示通过建立一个虚拟的方式生成自定义组件生成上面的代码是通过生成器动态生成一个正在加载的按钮组件上面的代码是通过方式动态生成一个按钮组件修改可以通过一下两种方式动态修改组件的配置项通 [github] | [说明文档] 示例 showImg(https://segmentfault.com/img/remote/1460000017...

    happyhuangjinjin 评论0 收藏0
  • 关于跨域问题

    摘要:面试必考题吧,所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑,提出了浏览器的同源策略做为解决方案。 面试必考题吧,所以在这会详细介绍以下内容 跨域产生的原因 罗列最常用的解决方法 分析各种方法原理 罗列各种方法优缺点 什么是跨域 由于浏览器厂商对安全性的考虑,提出了浏览器的同源策略做为解决方案。它...

    ZoomQuiet 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<