基于 Formily 的表单设计器实现原理分析 ​

编者寄语：本期为大家带来基于 Formily 的拖拽式表单设计器玩法，探索可视化时代表单设计器的可能。

背景

在控制台类 web 应用中，表单是最常见的交互形式。用户在表单中填写信息，点击提交就能完成对数据创建或者修改操作。

最开始，前端开发人员根据业务模型和具体需求，通过逐一编写或者声明实现表单中的各个字段，测试通过之后发布上线。渐渐地，开发人员开始把一些常用的方法抽象成表单库复用，提升开发效率。随着业务复杂度的增加和需求的不断演进，对表单的展示形式和灵活程度要求也在不断提高，现有的表单库只能解决部分问题，开发者仍需花费大量的精力在更新表单字段或者开发新表单上。

那有没有一种方式，既能让开发人员快速构建表单，同时在后期又很少或者根本不需要开发人员介入来更新表单呢？

此时，表单设计器应运而生。表单设计器提供了可视化界面，让非专业开发人员也能通过拖拽的方式，所见即所得的构建业务所需表单。

表单设计器样式

目前很多开源的表单设计器实现，在 UI 上都大同小异，设计器的结构类似设计软件的布局。表单设计器一般为左中右三栏布局:

• 左侧是控件列表，列出了设计器支持的表单控件。

• 中间部分是画布（canvas），左侧的控件可直接拖拽到画布中，并支持控件调整顺序、复制等操作。

• 右侧是表单字段的配置区域，在画布中选中一个字段，右侧将展示此字段的所有属性，用户可在此处配置字段标题、描述、校验规则等。