Vue规则表单组件的封装

业务背景

业务场景是这样的，目前有一个表单，表单中28个表单项，但这些表单项只有三种类型，一种是输入框，一种是选择框，还有一种是输入域。每一个label都是一个可点击a标签，此外在label的后面，紧跟着一个图标，鼠标悬浮图标上会有气泡信息，显示该表单项的更多的信息。 页面的效果是长这个样子的

表单是基于Element-ui来完成的，按照常规的写法是这样做的，

<el-form ref=”form” label-position=”top” :model=”jobContentForm” label-width=”80px” > <p> <a href=”https://docs.gitlab.com/ee/ci/yaml/README.html#job-keywords” target=”_blank” >官方字段解释</a> </p> <el-form-item label=”任务名”> <el-input v-model=”jobContentForm.name”></el-input> </el-form-item> <el-form-item label=”镜像”> <el-input v-model=”jobContentForm.image”></el-input> </el-form-item> <el-form-item label=”服务”> <el-input v-model=”jobContentForm.services”></el-input> </el-form-item> <el-form-item label=”前置脚本”> <el-input type=”textarea” v-model=”jobContentForm.before_script”></el-input> </el-form-item> <el-form-item label=”后置脚本”> <el-input type=”textarea” v-model=”jobContentForm.after_script”></el-input> </el-form-item> <el-form-item label=”Runner tags”> <el-input v-model=”jobContentForm.tags”></el-input> </el-form-item> <!– 此处还需要重复18个 el-form-item 标签–> </el-form>

这里的每一个el-form-item 都是一个表单项，一共有23个。 这种写法有个很大的缺点，那就是冗余代码太多，每一个项都要用el-form-item来包裹，而且代码非常的多，要修改一个表单也非常不好找要修改的数据。 做程序员就要敬精益求精，如果程序让你感觉不爽，那就优化它。

优化思路

于是乎，一段封装组件的历程由此开始。 解决这种冗余代码的难题有一个很明显的思路，那就是数据驱动，将代码压缩到极致。表单项由数据配置，组件的渲染也由数据驱动。这样实现下来，只需要一个el-input ,一个el-select， 修改配置数据也变得非常简单。

说干就干。

提取数据。

提取数据是一个技术活，它要求你要将事物抽丝剥茧，抽象起来。现在让我们一步一步来分析一下。 对照着页面，我们很容易想到每一个输入框，每一个选择框 都是一个对象， 这个对象会有

唯一主键id， 表单项的label， 表单项的默认值 defaultValue 表单项的类型type，type为input时，表明当前表单项为el-input， 为select时表单项为el-select 点击label要到达的链接， link label的详细解释 des 表单项的 placeholder 如果表单项是select时，需要有待选项 options这样一个数组

那么一个表单项的数据大致就是这样的

formItem = { id: image, label: 镜像, defaultValue: , type: input, link: https://www.baidu.com/, des: Docker 镜像名, placeholder: 请输入, options:[{label:1,value:1},{label:2,value:2}] },

提取出一个表单项后，举一反三，我们就能很简单地列举出其他表单项的配置上数据。只是改一下值而已。 一个表单中有多个对象, 这多个对象就组成了一个数组。这个数组就是一个表单的全部配置数据。 经过抽象提取，一个表单的数据大致是这个样子的

export const globaleForm = [ { id: image, label: 镜像, defaultValue: , type: input, link: https://www.baidu.com/, des: 12445 , placeholder: 请输入}, { id: services, label: 服务, defaultValue: , type: input, link: , des: , placeholder: 请输入 }, { id: before_script, label: 前置脚本, defaultValue: , type: input, link: , des: , placeholder: 请输入 }, { id: after_script, label: 后置脚本, defaultValue: , type: input, link: , des: , placeholder: 请输入 }, { id: tags, label: Runner标签, defaultValue: , type: input, link: , des: , placeholder: 请输入 }, { id: cache, label: 缓存, defaultValue: , type: input, link: , des: , placeholder: 请输入 }, { id: artifacts, label: 制品, defaultValue: , type: input, link: , des: , placeholder: 请输入}, { id: retry, label: 重试次数, defaultValue: , type: select, link: , des: , placeholder: 请输入, options:[{label:1,value:1},{label:2,value:2},{label:3,value:3},] }, { id: timeout, label: 超时时间, defaultValue: , type: input, link: , des: , placeholder: 请输入}, { id: interruptible, label: 是否中断, defaultValue: , type: input, link: , des: , placeholder: 请输入}, ]

以上便是最终的配置数据。

提取组件

提取完表单的配置数据后，我们就要进行组件的封装， 由于是一个表单，这里肯定是少不了一个el-form 和 一个v-for去遍历globaleForm 创建一个 CustForom.vue 的组件,将表单的配置参数globaleForm传入。 内容如下

<template> <el-form :ref=”formRef” label-position=”top” label-width=”80px” :model=”formValue”> <el-form-item :label=”item.label” v-for=”item in formItemArr” :key=”item.id” > <!–TODO–> </el-form-item> </el-form> </template> <script> export default { props: { // 表单的配置数据 formItemArr: { type: Array, default: () => [], }, } }; </script>

v-for遍历的内部是组件的核心组件结构，由于我们的label是一个可以点击的，并且有tip气泡效果的，那么我们可以使用label的插槽来实现。 lebel这部分的代码就是这样子的，item是遍历的元素

<template slot=”label”> <a class=”label-link-info” target=”_blank” :href=”item.link”> <span class=”label-text”>{{item.label}}</span> <el-tooltip v-if=”item.des” class=”item” effect=”dark” :content=”item.des” placement=”top”> <i class=”el-icon-info”></i> </el-tooltip> </a> </template>

处理完label，下面就是输入框与选择框的逻辑判断了， 由于我们用属性type来表明当前的表单项是input 还是select，所有这里的逻辑很简单， 如果type是input，那么就渲染一个el-input， 如果是select没那么就渲染有一个el-select.,另外我们需要一个对象来存储用户输入的数据，命名为formValue， 并且需要将配置的表单数据中的默认值，赋值给formValue 表单输入区域的组件结构就变成这样了.分析到这一步 组件的代码就变成了以下这样子

<template> <el-form :ref=”formRef” label-position=”top” label-width=”80px” :model=”formValue”> <el-form-item :label=”item.label” v-for=”item in formItemArr” :key=”item.id” > <!–label插槽的设置 –> <template slot=”label”> <a class=”label-link-info” target=”_blank” :href=”item.link”> <span class=”label-text”>{{item.label}}</span> <el-tooltip v-if=”item.des” class=”item” effect=”dark” :content=”item.des” placement=”top”> <i class=”el-icon-info”></i> </el-tooltip> </a> </template> <!–输入框 输入域的渲染–> <el-input v-if=”item.type === input” :type=”item.inputType” v-model=”formValue[item.id]”></el-input> <!–选择框的渲染–> <el-select v-if=”item.type === select” v-model=”formValue[item.id]” placeholder=”请选择”> <el-option v-for=”oitem in item.options” :key=”oitem.value” :label=”oitem.label” :value=”oitem.value”> </el-option> </el-select> </el-form-item> </el-form> </template> <script> export default { props: { formItemArr: { type: Array, default: () => [], }, }, data() { return { formValue: {}, }; }, watch: { // 监听formItemArr，将formValue的值设置上 formItemArr: { handler(v) { if (!v.length) return; v.forEach((x) => { this.$set(this.formValue, x.id, x.defaultValue || “”); }); }, immediate: true, }, }, }; </script>

到了这一步我们已经完成了大部分，配置好数据，调试以下。只要在编写一个方法，将表单的值对外暴露一下即可。 这样写

methods: { getFormValue() { return this.formValue }, },

然后我们在组件调用的时候使用ref获取组件的实例，进而调取getFormValue()方法,就是简单地在父组件里调用子组件的方法从而获取到自组件内部的data数据.

写在最后

整个过程说复杂也不复杂，说简单也不简单，重要的是大家要掌握抽象组件，提取配置数据的思路。 注意，通过数据驱动编写的组件，扩展性并不是很好， 与不封装，单独调用底层的方式相比。如果你的表单，业务逻辑很复杂，并且还有很多动态元素。建议还是不用这种数据驱动的表单组件。