前言
Vue3曾经发了一年多了，当初也是曾经转正了，Antd和element的Vue3版本也都是能够用了。Vue3刚公布没多久的时候我就上车了，过后在Github找了一圈Vue3的Admin架子，最初发现了vue-vben-admin这个我的项目，感觉这个作者写得很好，代码标准，封装啥的都很欠缺，过后Vben还只有1k多star，当初曾经10.3k了，尽管很多感觉它太臃肿了，但事实证明它的确是很好，预计前面还会缓缓减少。过后就想做一个Vben的element移植版，奈何过于懈怠，只搭起了架子，没有做后续，加上Vben的确简单，它的自定义组件不是太好移植。搁置到了往年，最近捡起来，移植了Form组件包含useForm的用法。
我的项目
我的这个element-puls版的我的项目地址vele-admin，目前移植了Model，Dialog，Form组件，用过Vben的应该晓得，就是应用useForm的模式，template模版外面的组件参数能够少传一些。
OK，开整，先说一下，Vben外面的Form组件写得比较复杂，各种util函数封装的比拟多，我这里写的时候进行了很多缩减，代码简化了很多，也更容易看懂。
剖析
useForm
Vben的很多组件都是对Antd进行二次封装，应用useFunc的模式对数据进行解决，让咱们在模版中不须要写过多的参数，也不必写大量反复的Antd组件。
上代码，useForm承受props参数，props就是Form组件的属性，Vben外面加了更多本人的属性，领有更多自定义的性能，我这里就不做那么多了，我的props类型基本上就是element-plus的form属性，除了schemas，基本上都是间接传给el-form的，schemas是为了去主动增加Form的内容组件的，前面再具体说。
schemas 表单配置属性
model 表单数据，须要传入ref或reactive的响应式变量
rules 表单验证规定
export interface FormProps { schemas?: FormSchema[]; // 表单数据对象 model?: Recordable; // 表单验证规定 rules: any; // 行内表单模式 inline: boolean; // 表单域标签的地位， 如果值为 left 或者 right 时，则须要设置 label-width labelPosition: string; // 表单域标签的宽度，例如 '50px'。 作为 Form 间接子元素的 form-item 会继承该值。 反对 auto。 labelWidth: string | number; // 表单域标签的后缀 labelSuffix: string; // 是否显示必填字段的标签旁边的红色星号 hideRequiredAsterisk: boolean; // 是否显示校验错误信息 showMessage: boolean; // 是否以行内模式展现校验信息 inlineMessage: boolean; // 是否在输入框中显示校验后果反馈图标 statusIcon: boolean; // 是否在 rules 属性扭转后立刻触发一次验证 validateOnRuleChange: boolean; // 用于管制该表单内组件的尺寸 strin size: string; // 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再失效 disabled: boolean;}