vben自定义hook useForm的想法以及经验

前言

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;
}