Vue表单生成器设计实践

ゝ一世哀愁。 2023-06-15 06:54 19阅读 0赞

## 前言 ##

在公司一直从事基于**Vue**框架后台应用的前端研发，而该类应用的页面有较多的通过表单交互来增删改查的操作，为了进行优雅的开发体验，也有感于项目当前的代码，遂封装一个更合适的表单生成器**form-generator.vue**。

稍有从业经验的人都晓得，这类生成器在基于`iview`，`ant-design`这样的组件库下实现不算复杂，因此这里主要是阐述表单生成器的设计思路。

当前项目的表单生成操作有以下问题：

1.  实现form生成功能的组件代码僵硬，是通过`v-if`指令根据`type`字段来判断要渲染哪个组件，相应的schema如下：
    
        filterList: { 
            list: { 
                mallName: { 
                    name: 'mallId',
                    displayName: '商场',
                    type: 'SELECTION',
                    notNull: true,
                    value: '',
                    options: { 
                        option: []
                    }
                },
                billDate: { 
                    name: 'billDate',
                    displayName: '账单期',
                    type: 'MONTH',
                    notNull: false,
                    value: '',
                    options: { 
                        option: []
                    }
                }
                // ......
            }
        }

如果有其他类型的组件要渲染，则要更改当前的form结构数据和生成器实现组件中的`v-if`相关代码。

1.  可以看到，当前的form结构数据，将form的schema和相应的值`value`写在同一个对象中，这样，在将form结构数据写在`Vuex`类似的状态库中时，造成form结构数据和实际使用的代码组件的上下文的不统一。
2.  form结构的数据的构造较复杂，有很深的嵌套，代码的可读性不友好。

## 思路 ##

**Vue**框架有内置组件`component`，链接[如下][Link 1]。用法是：渲染一个“元组件”为动态组件。依 `is` 的值，来决定哪个组件被渲染。通过`component`内置组件和`is`特性，我们可以很优雅的实现不同类型组件的分发渲染。这样我们只需要通过一个特定的字段`componentType`指明当前要渲染的组件名，然后赋值给`is`。而不需要冗长的`v-if`相关代码。

其次，我们将表单生成器的schema和表单最终存放的值一起存放到model中。

那么，我们的表单生成器的结构就出来了。

{ 
        model: { 
            mallId: '',
            billDate: ''
        },
        schema: { 
            fields: [
              { 
                 name: 'mallId',
                 displayName: '商场',
                 componentType: 'Select',
                 placeholder: '不限',
                 required: true,
                 trigger: 'change',
                 propObj: { 
                   transfer: true,
                   filterable: true,
                   clearable: true
                 },
                 options: []
              },
              { 
                  name: 'billDate',
                  displayName: '账单期',
                  componentType: 'DatePicker',
                  placeholder: '请选择时间',
                  propObj: { 
                      transfer: true,
                      type: 'month',
                      class: 'datePicker'
                  }
              }
            ]
        }
    }

在实际生产使用中，schema部分存放在`Vuex`状态库中，而model部分则存放在具体组件的`data`中。这样做的考虑在于：类似`Select`组件的枚举值是从服务端获取到的，在接口请求到数据中当即将其设置到`Vuex`状态库中，而具体页面中存放的model对象可能会用于页面组件其他部分代码的操作。当然，也可以将这个form数据结构一起存放到`Vuex`状态库中或者直接存放到具体组件的`data`中。

## 结构解读 ##

整个对象存放两个属性：model和schema。

1.  model对象用于存放最终和form交互到的值，**form-generator.vue**组件的model属性即传递该值，并且使用了`sync`修饰符进行了数据的双向绑定。
2.  schema对象主要的属性是fields，该字段是一个数组，用来存放具体待渲染为form组件的数据结构。
    
    1.  属性clearVerifyMsg用来驱动表单进行全部组件DOM层次的重置。
    2.  属性colProp用于每个表单组件外层包裹的`ICol`组件的栅格宽度控制，默认值为`{ lg: 8, md: 12 }`，及其其他`ICol`组件相关属性。
    3.  fields数组下的每一项的属性如下：
        
        1.  name：其值对应model中的字段名，在渲染的时候将model中的值双向绑定到当前渲染的组件中。
        2.  componentType：`is`属性来使用，用来确定当前要渲染的组件名
        3.  displayName：表单当前组件的label，会赋值给包裹着组件的`FormItem`外层组件的`label`属性中。
        4.  hide：使用`v-if`指令控制当前组件是否渲染
        5.  placeholder：占位符
        6.  required：用在`FormItem`组件中，控制当前组件是否需要验证
        7.  propObj：使用`v-bind="propObj"`语法来设置当前组件的props
        8.  options：当前待渲染组件为`Select`时，该组件的子组件`Option`要渲染的列表
        9.  optPropObj：当前待渲染组件为`Select`时，子组件`Option`的属性
        10. append：当前待渲染组件为`Input`时，对应`slot`的值
        11. handler：在组件触发事件时，对当前组件值的特定的处理
        12. trigger：控制当前组件在以什么方式触发值的校验操作，默认为**blur**
        13. validator：使用了组件库对应的验证功能，当值为`string`时，为该类型，当值为`object`时，直接使用该值进行验证，当值为`function`时，为自定义的验证器

## 其他 ##

该组件基于`iview`组件进行开发，会用到相应的组件和表单验证功能。所以，该组件也可用于`ant-design-vue`类似的组件库。

## 缺点 ##

1.  由于使用了`component`内置组件进行相应组件的渲染分发，所以，对组件的属性定制不友好，每个`item`都需要传入需要的`props`，一种解决方案是：对该组件做一次包裹，然后`componentType`属性传入包裹后的组件名。
2.  每个`item`的`on-change`事件的回调函数的入参个数不一，且还需传入原生的`event`对象，如何处理不同组件传递参数的问题还未很好处理。

## 具体代码 ##

<template>
      <IForm
        slot="from"
        ref="formValidate"
        :model="model"
        :rules="ruleValidate"
        :label-width="labelWidth"
        :inline="inline"
      >
        <template v-for="(item, idx) in fieldList">
          <ICol v-if="!item.hide" :key="idx" v-bind="colProp">
            <FormItem
              :label="item.displayName"
              :prop="item.name"
              :required="item.required"
            >
              <component
                :is="item.componentType"
                :ref="item.name"
                v-model.trim="model[item.name]"
                :placeholder="item.placeholder"
                v-bind="item.propObj"
                @on-change="(value, $event) => handleChange(value, $event, item)"
              >
                <template v-if="item.options">
                  <Option
                    v-for="(opt, i) in item.options"
                    :key="i"
                    :value="opt.value"
                    :disabled="opt.disabled"
                    v-bind="item.optPropObj"
                    >{ {  opt.label }}</Option
                  >
                </template>
                <template v-if="item.append">
                  <span slot="append" :style="item.appendStyle">{ { 
                    item.append
                  }}</span>
                </template>
              </component>
            </FormItem>
          </ICol>
        </template>
        <slot name="bottom">
          <div class="bottomBar" :style="bottomBarStyle">
            <Button type="primary" @click="handleSubmit('formValidate')">{ { 
              okText
            }}</Button>
            <Button
              v-if="hasReset"
              class="custom_btn"
              @click="handleReset('formValidate')"
              >重置</Button
            >
            <slot name="bottom-extra-btns" />
          </div>
        </slot>
      </IForm>
    </template>
    <script>
    const isObject = obj =>
      Object.prototype.toString.call(obj).slice(8, -1) === 'Object'
    
    export default { 
      name: 'FormGenerator',
      props: { 
        model: { 
          type: Object,
          default() { 
            return { }
          }
        },
        schema: { 
          type: Object,
          default() { 
            return { 
              fields: []
            }
          },
          validator: function(obj) { 
            return obj.hasOwnProperty('fields') && Array.isArray(obj.fields)
          }
        },
        inline: { 
          type: Boolean,
          default: true
        },
        labelWidth: { 
          type: [Number, String],
          default: 110
        },
        okText: { 
          type: String,
          default: '查询'
        },
        hasReset: { 
          type: Boolean,
          default: true
        },
        bottomBarStyle: { 
          type: Object,
          default() { 
            return { }
          }
        },
        resetToDefaultValue: { 
          type: [Boolean, Object],
          default: false
        }
      },
      data() { 
        return { 
          ruleValidate: { }
        }
      },
      computed: { 
        fieldList() { 
          return this.schema.fields
        },
        colProp() { 
          const obj = isObject(this.schema.colProp) ? this.schema.colProp : { }
    
          return { 
            lg: 8,
            md: 12,
            ...obj
          }
        }
      },
      watch: { 
        'schema.clearVerifyMsg': function(newVal) { 
          if (newVal) { 
            this.$refs['formValidate'].resetFields()
          }
        }
      },
      created() { 
        this.ruleInit()
      },
      methods: { 
        handleSubmit(name) { 
          this.$refs[name].validate(valid => { 
            if (valid) { 
              const result = JSON.parse(JSON.stringify(this.model))
    
              this.$emit('on-submit', result)
            }
          })
        },
        handleReset(name) { 
          if (this.resetToDefaultValue) { 
            const newValue = isObject(this.resetToDefaultValue)
              ? this.resetToDefaultValue
              : this.model
    
            this.$emit('update:model', newValue)
          } else { 
            this.$refs[name].resetFields()
          }
          this.$emit('on-reset')
        },
        handleChange(value, evt, item) { 
          const {  handler } = item
    
          let verifiedValue = ''
    
          if (typeof handler === 'function') { 
            verifiedValue = handler(value, item, evt)
          } else if (value instanceof InputEvent) { 
            verifiedValue = value.target.value
          } else { 
            verifiedValue = value
          }
    
          if (verifiedValue !== undefined) { 
            this.$nextTick(() => { 
              this.$set(this.model, item.name, verifiedValue)
              this.$emit('update:model', this.model)
            })
          }
        },
        ruleInit() { 
          this.fieldList.forEach(
            ({  required, validator, name, trigger = 'blur' }) => { 
              if (required) { 
                this.$set(this.ruleValidate, name, [
                  { 
                    trigger,
                    required: true,
                    message: '必填项，不能为空'
                  }
                ])
              } else if (validator) { 
                if (typeof validator === 'string') { 
                  this.$set(this.ruleValidate, name, [
                    { 
                      trigger,
                      required: true,
                      type: validators,
                      message: `只能输入${ validator}类型`
                    }
                  ])
                } else if (typeof validator === 'function') { 
                  this.$set(this.ruleValidate, name, [{  trigger, validator }])
                } else if (
                  isObject(validator) &&
                  validator.hasOwnProperty('type')
                ) { 
                  this.$set(this.ruleValidate, name, [validator])
                } else { 
                  throw new Error(`字段${ name}的属性type的类型错误`)
                }
              } else { 
                this.$set(this.ruleValidate, name, [])
              }
            }
          )
        }
      }
    }
    </script>
    <style lang="less" scoped>
    .bottomBar { 
      text-align: right;
      margin-left: 108px;
    }
    </style>

[Link 1]: https://cn.vuejs.org/v2/api/#component