文档驱动

想要做到文档驱动表单，首先要做几个表单元素组件。基于原生的HTML5的表单元素，做了一下分类，比如文本类、数字、日期、选择等，具体如下图。
【图片】

然后就是

文档 >> json >> vue >> UI >>表单

这个流程了。
其中Vue提供了很方便的数据双向绑定的功能，
UI提供了非常好看的视觉效果。
那么既然他们都做好了，我就不重复制造轮子，直接拿过来使用。

可能你会奇怪，UI库提供了一些列的组件，为啥还要自己封装组件呢？
主要原因就是使用方式和我的想法有点不太一样，比如element的select要这么用：（代码来自官方）

这是非常标准的用法，也非常灵活，只是有一点点麻烦。好吧，我承认是我太懒了，我不想每次用的时候都写这么多的代码（html+js）。我想这样写：

三行代码搞定，一行html，两行js。
组件只需要设置两个属性，一个是model，一个是元数据（meta），也就是json格式的属性信息。

实现方法

其实方法也很简单，只需要自己做一个组件，把上面那段el的select（原生的HTML5测试通过，el的还没测试，应该可以吧）放进去，把需要的各种属性值（包含options的数据项）做成json通过meta属性传递进去就可以了。

优点

非常简单，可以大大减少代码量，而且还可以用v-for来遍历，这样就算再大的表单，一个for就搞定了。

缺点

灵活度不够，肯定没有直接使用select来的灵活。

选择

不过最终“懒惰战胜了灵活的需求”，我还是想按照我的想法做出来一套东东玩玩。

代码

文本类的Input

下面是文本类的input的封装方式，基于原生html5。为啥不用element呢？因为我跳过了vue2.*，直接使用vue3.0来写的，但是在安装element的时候，报了一大堆错误。
我基本功太差没搞不定，所以就先不用element了。
用原生的做验证我的想法是否可以实现，以后搞定了在加上其他UI。
本来我的想法就是基于每个UI都做一套，可以跨UI，甚至跨架构。

/** 文本类的，text、密码、url、邮件等 */

check 多选

再贴一个多选的组件，使用type=”check”实现，这个因为要实现多选，所以代码有些不同。其他的代码都是雷同的，就不一一贴了。想看代码可以到这里看 。https://github.com/naturefwvue/nfComponents

/**多选组，返回逗号连接的value值，比如：“1,2,3” */

分还是合？

其实这些零散的组件可以合在一个组件里面的，代码也不会太多，但是我想来想去，还是分开的话，便于以后的扩展。

只是这么零散，用的时候还要想我到底用哪个组件，这不符合我懒惰的人设，所以我又做了一个“组合”组件，
就是把分散的各个组件，组成一个组件，这样在使用的时候引用这一个就可以了。

/** 表单元素的综合组件，根据类型自动加载相应的组件 */

value的类型问题

这里有个数据类型的问题，各个子组件可以规定 modelValue的类型，但是这个组合组件的类型怎么定呢？我写成了 object，虽然运行的时候虽然不会报红色的错误，但是总会报数据类型验证错误的提示，按F12,满眼全是，很烦。

one more thing

代码还在不断完善中，希望能够找到自同道合的人。
还有很多后续，比如meta是如何生成的，表单的代码到底是啥样的？还有查询和数据列表怎么办？等等都有解决方案。