Loading...
首页专栏正文

Vue规则表单组件的封装

 
1人已赏
Fizz 发布于 2020-12-10 19:38:30 浏览 6090 点赞 95 收藏 8

业务背景

业务场景是这样的,目前有一个表单,表单中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数据.

写在最后

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

前端架构师,精通前端技术栈,物联网。了解云原生,容器编排。

*本文仅代表作者观点,不代表易百纳技术社区立场。系作者授权易百纳技术社区发表,未经许可不得转载。

精彩评论

内容存在敏感词
打赏
打赏作者
Fizz
您的支持将鼓励我继续创作!
金额:
¥1 ¥5 ¥10 ¥50 ¥100
支付方式:
微信支付
支付宝支付
微信支付
打赏成功!

感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

易百纳技术社区
确定要删除此文章、专栏、评论吗?
确定
取消
易百纳技术社区