推荐6个开源可视化表单生成器

开源 0

文章目录

  • 一、前言
  • 二、`Formily`
  • 三、`Variant Form`
  • 四、`form-create`
  • 五、`Everright-formEditor`
  • 六、`form-generator`
  • 七、`EpicDesigner`
  • 八、最后

一、前言

通常,可视化表单生成器包含两大核心组件:表单设计器表单渲染器

表单设计器负责提供直观的可视化界面,让用户能够方便地搭建表单,并生成对应的JSON配置文件。

表单渲染器则负责读取这些JSON配置,并将其转换成实际可用的表单界面。

二、Formily

Formily 是一款面向中后台复杂场景的数据+协议驱动的表单框架,它也是阿里巴巴的统一表单解决方案。借助 Formily 可以完成复杂的表单页面需求,同时 Formily 提供的表单设计器可以快速搭建表单。

Github:https://github.com/alibaba/formily

官网:https://formilyjs.org/zh-CN

Formily设计器:https://designable-antd.formilyjs.org/

三、Variant Form

Variant Form 是一款高效的 Vue 低代码表单、工作流表单,包含表单设计器和表单渲染器,可视化设计,一键生成源码。它支持在 Vue 2Vue 3 中使用,支持 Element UI 组件库。

预览效果:

Github:https://github.com/vform666/variant-form

官网:https://www.vform666.com/

vue2版本:http://120.92.142.115/

vue3版本:http://120.92.142.115:81/vform3/

四、form-create

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持 5 个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。

Github:https://github.com/xaboy/form-create

官网:http://www.form-create.com/v2/

vue2版本:http://form-create.com/designer/

vue3版本:http://form-create.com/v3/designer?fr=github

五、Everright-formEditor

Everright-formEditor 是一个开源的可视化低代码编辑器,只需简单的操作即可创建出表单,拥有灵活的交互界面,PC端依赖Element PlusMobile 依赖 Vant,内部有一套适配器,适配 ElementVant 的组件。

逻辑控制器:

Github:https://github.com/Liberty-liu/Everright-formEditor

官网:https://everright.site/formEditor/introduction.html

示例:https://everright.site/demo/editor.html?layoutType=1&isEdit=1&lang=zh-cn

六、form-generator

form-generator 是一款 Element UI 表单设计及代码生成器,可将生成的代码直接运行在基于 Element UIVue 项目中;也可导出 JSON 表单,使用配套的解析器将 JSON 解析成真实的表单。

Github:https://github.com/JakHuang/form-generator

示例:https://mrhj.gitee.io/form-generator/#/

七、EpicDesigner

EpicDesigner 是一款功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发,兼容多套 UI 组件库,除了基础的页面设计功能,EpicDesigner 还提供了强大的扩展功能,可以让开发者根据自己的需求自由扩展和定制组件。此外,EpicDesigner使用 JSON 配置来生成页面,可帮助开发者快速生成页面,提高开发效率。它提供了两个重要组件:e-designer 设计器和 e-builder 生成器。

Github:https://github.com/Kchengz/epic-designer

官网:https://kcz66.gitee.io/epic-designer/

element-plus版本:https://epic.kcz66.com/demo/element-plus/

antdv3:https://epic.kcz66.com/demo/antdv3/

naive-ui:https://epic.kcz66.com/demo/naive-ui/

八、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

也许您对下面的内容还感兴趣: