vue如何封装一个高质量的表单通用组件

基于Element-plus实现二次封装表单组件

• 特性复用：必须继承原有组件的所有特性。

• 命名规范：二次组件名必须见名知意，我们一般都是起一个公用名+原有组件名，比如lib-form。

• 接口简单：自定义暴露出来的接口越简单越好。

• 容易拓展：留有自定义插槽，让用户可以自己选择。

• 功能完善：具备更完善的功能如：表单验证、动态删减表单，集成第三方的插件（富文本）...

• 场景通用：具备多个场景使用，比如弹框嵌套表单、页面嵌套表单。

封装一个高质量的通用组件，上面是真的只是基操，话不多说，直接上实践手把手教你封装组件。

步骤1

继承原有组件的所有特性（这也是封装的核心）。先明确三个大方向：

表单固定属性，继承Form表单的所有属性、方法。

 // 定义el-form的ref继承原有组件的form属性
 export interface FormInstance {
  registerLabelWidth(width: number, oldWidth: number): void,
  deregisterLabelWidth(width: number): void,
  autoLabelWidth: string | undefined,
  emit: (evt: string, ...args: any[]) => void,
  labelSuffix: string,
  inline?: boolean,
  model?: Record,
  size?: string,
  showMessage?: boolean,
  labelPosition?: string,
  labelWidth?: string,
  rules?: Record,
  statusIcon?: boolean,
  hideRequiredAsterisk?: boolean,
  disabled?: boolean,
  validate: (callback?: Callback) => Promise,
  resetFields: () => void,
  clearValidate: (props?: string | string[]) => void,
  validateField: (props: string | string[], cb: ValidateFieldCallback) => void,
}

表单项固定属性，继承表单项的所有属性、方法。

// 表单每一项的配置选项
export interface FormOptions {
  // 表单项显示的元素
  type: '',// 定义表单项类型
  value?: any, // 表单项的值
  label?: string,// 表单项label
  prop?: string,// 表单项的标识
  rules?: RuleItem[],// 表单项的验证规则
  placeholder?: string,// 表单项的占位符
  attrs?: {  // 按需定义不同表单类型属性
    ...
  },
  children?: FormOptions[],// 表单项的子元素，可能存在嵌套表单组件，如select
  ....// 适当扩展我们需要的属性，比如上传组件属性，行布局表单属性
}

由于Element-plus组件都是以el-为前缀，所以type取值只需要取el-后面部分作为值就行，比如el-input取 'input' 为值。



表单验证效果，继承组件原有的所有验证属性。由于Element-plus的验证都是使用 async-validator 这个插件的验证方法，直接复用插件源码路径async-validator/src/interface.ts文件下的所有代码：

// 核心代码：封装验证方式时的属性
export interface RuleItem {
  type?: RuleType; // 验证种类
  required?: boolean;// 是否必填
  pattern?: RegExp | string;// 验证方式匹配
  min?: number; // 表单项最小值
  max?: number; // 表单项最大值
  len?: number; // 表单项字符长度
  trigger?: string | string[];// 验证触发方式
  ....
}

步骤2

实现一个完善的通用组件封装，通过对标签封装、接口 暴露、开发者传参等。明确表单类型，根据不同类型表单复用多种场景，不仅开发者用户拓展，而且，让开发者用最少代码就可以复用：

  
    ... 
  

普通表单项封装，比如日期、输入等组件。

嵌套表单项封装，比如下拉框，除了select组件还嵌套option组件。

富文本表单项封装

本文使用的是wangEditor。