关于java: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;
}