低代码表单

实现三个目标

• 根据一个特定的数据自动生成表单
• 获取填写数据并支持校验功能
• 能自定义属性作用到input等原始组件上

首先讲讲总体思想，所谓的低代码表单就是后端传递一个特殊结构的对象数组，然后确定根据这个对象数组来自动生成表单，这个对象结构可以是这样的:

interface FormItem {
	value: "" // 预填
	config: {  // 配置
		field: 0 // 字段类型
		validator:  '[0-9]{2}' // 正则校验
		SelectOptions: ['男','女'] // 选项
		placeholder: "xxx"  // 需要透传到原生元素节点的html属性
	}
}

然后我们定义好每个原子组件，比如Input组件、Select组件等，然后利用vue动态组件来动态地选择渲染哪个组件。在这个过程中，我们定义Form组件，作为一个整体的表单组件，它会接收前面说的对象数组并负责迭代渲染每一个具体的组件，而在Form组件到原生元素节点之间建立一个Field组件，来做为中间层进行一些处理，例如数据处理。

按这种设计思路，组件数据流就是这样的：

  Form
		|
 	Filed
	  |
	原生节点

如何传递html属性到原生表单元素上？

通过$attrs透传config对象

如何获取每个表单子项的数据到Form组件中并实现数据校验？

在Field组件监听onChange事件可以获取数据，并通过emit(’update:modelValue’) 将数据传递到Form表单组件中。这样的优点是能够实时地获取数据，在某些时候会很有用，但是缺点也有很多：

1. 对一些表单元素无效
2. 如果用户不输入任何值，则传递到Form组件的值为空，而不是预填值

因此我们还需要做另外一个方案来弥补这些缺点，并且还能实现校验。

这个方案的思路是通过defineExpose暴露一个校验函数，函数校验成功则返回输入数据，否则返回提示信息。

在用户点击表单提交时可以利用此校验函数进行校验，如果想用户每输入一个表单项就校验的话可以监听onBlur事件。

简易版本完整代码：