FormMaking --基于 [vue]实现的表单设计器,可以让表单开发简单而高效。

Autor: Palapple Date: 2020-03-04 Tag: Vue, JS, React, Ant Design Pro, Formmaking

[图片上传失败...(image-424ab4-1585899765538)]

关于FormMarking调研

基本情况

基于 vue 和 element-ui 实现的表单设计器,使用了最新的前端技术栈,内置了 i18n 国际化解决方案,可以让表单开发简单而高效。

组件

  • MakingForm 表单设计器(基于可视化操作快速设计出表单页面,并获取到表单配置 json 数据)。

  • GenerateForm 表单生成器(根据设计器中获取的配置 json 数据,快速渲染出表单页面)。

  • 在线预览

  • 使用文档

  • 高级版本 提供了更多的组件和操作API

特性

  • 可视化配置页面
  • 提供栅格布局,并采用flex实现对齐
  • 一键预览配置的效果
  • 一键生成配置json数据
  • 一键生成代码,立即可运行
  • 提供自定义组件满足用户自定义需求
  • 提供远端数据接口,方便用户需要异步获取数据加载
  • 提供功能强大的高级组件
  • 支持表单验证
  • 快速获取表单数据
  • 国际化支持

优点

  • 快速构建表单,提供栅格布局;
  • 减少重复作业,高效完成表单和json双向转化;
  • 对于个性化定制,可以添加自定义class覆盖原来的样式,满足业务的实际需求;
  • 支持Element-ui和Ant Design-ui;
  • 提供多种api接口,对数据和字段进行操作;

缺点

  • 高级组件数量不够多;原生antd of vue 中包含57个组件,还有很多高级组件,类似card,list等等未完成;
  • 对于中台应用来说,Table,Card,Search等经常使用的组件暂时没有,等后续更新;

应用场景

Element-UI版本(实际使用图)

  • 表单生成器( GenerateForm)

[图片上传失败...(image-ff32ca-1585899765538)]

https://www.v2ex.com/t/642079

  • 表单设计器 (MakingForm)

[图片上传失败...(image-cd5c0a-1585899765538)]

Antd版本(使用vue cli3实现)

[图片上传失败...(image-4549d6-1585899765538)]

PS

  1. antd组件版本暂时只在高级版本才有;产品正在进一步兼容antd的高级组件,提升容量;
  2. 通过跟Ant Design Pro配合Element-ui搭配完美,Antd组件兼容性待测量;
  3. 建议搭配第三方组件使用:
  • vuedraggable
  • Element
  • ace
  • vue2-editor

你可能感兴趣的:(FormMaking --基于 [vue]实现的表单设计器,可以让表单开发简单而高效。)