这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

在上一篇vue 管理后台table封装中，讲解了如何封装table,这一篇写如何封装form。封装form说难也难，说简单也简单，毕竟你封装一个也是封装，把好多东西全搞进入也是封装。我这个项目刚开始，我也就简单的介绍下，暂时只封装下input，其实思路都是一样的。

问题分析

看下图：

我们封装的只有这两个input。

组件分析

<el-form ref="form" :model="listQuery" label-width="80px">
   <el-form-item label="店铺名称" style="width:300px;float:left;">
      <el-input v-model="listQuery.name" />
   </el-form-item>
   <el-form-item label="店铺手机号" label-width="100px" style="width:300px;float:left;">
        <el-input v-model="listQuery.phone" />
   </el-form-item>
   <el-button type="primary" style="margin-left: 20px;" @click="getStoreList">查询</el-button>
</el-form>

这是我所使用的组件的代码，在封装的时候，我们可以直接看el-form的组件给到的属性，

数据类型

我们要确定好我们需要的数据，例如label ,type, prop, Function等等，在思考后，得到如下数据结构

form

formName: String
formType: String
formData: Object
const formArr: Array = [
  {
    label: Array,
    type: String,
    prop: String,
    size: String,
    labelWidth: String,
    placeholder: String,
    handle: Function
  }
]

btn

const btnArr: Array =  [
  {
    label: String,
    type: String,
    handle: Function
  }
]

当我们确定完数据结构，我们就可以敲代码了，结合element组件。

封装form

全局组件

这里我们还是先创建我们的组件，我的组件名称为FrForm.vue，之后导入到index.js中，同时把它添加到组件列表中

import FrForm from './FrForm/index'
const components = [FrForm]

组件的编写

组件分析

在这个组件里我们其实封装有两种，一种是表单，一种是按钮，两种我们一一叙述。

表单封装

我们已经定义好了数据格式，那么我们就需要通过for循环遍历出来，同时我们给了type类型，这是为了后期的扩展。 这里说下一个参数formType，这个参数分为form和select，form是指弹窗，select就是我们查询，当然我是这么搞的，大家有其他的想法随意发挥。

<el-form :ref="formName" :model="formData">
      <template v-for="(item, index) in formArr">
        <el-form-item
          :key="index"
          :label="item.label"
          :label-width="item.labelWidth"
          :prop="item.prop"
          :style="{
            marginLeft: item.marginLeft,
            float: formType === 'select' ? 'left' : 'none'
          }"
        >
          <el-input
            v-if="item.type === 'input'"
            v-model.trim.lazy="formData[item.prop]"
            @keyup.enter.native="item.handle()"
          />
        </el-form-item>
      </template>
</el-form>

btn组件

这个组件其实没有什么可说的，就是label，type，Function等，后期扩展在再说

<template v-for="(item, index) in btnArr">
  <el-button
   :key="index"
   :type="item.type"
   :disabled="item.disabled"
   :size="item.size || size"
   style="margin-left: 20px;"
   @click="item.handle()"
  >
    {{ item.label }}
  </el-button>
</template>

其实还是一个原则，就是尽量多考虑，最好是组件上有的参数，你都加上，有备无患。

prop定义

根据上边的内容，我们就可以直接定义我们从父组件传到全局组件的参数了

formName: {
      type: String,
      default: () => {
        return ''
      }
    },
    formType: {
      type: String,
      default: () => {
        return 'select'
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    btnArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    size: {
      type: String,
      default: () => {
        return 'small'
      }
    }

通过上边的编写我们的组件已经可以正常使用了，剩下的就是在页面调用这个组件

组件的调用

因为是全局组件，我们也不需要去注册，直接使用就可以了，代码如下

<FrForm
  ref="formData"
  :form-name="'formData'"
  :form-data="formData"
  :form-arr="formArr"
  :btn-arr="btnArr"
  :inline="true"
/>

我们按需写好自己的参数就可以正常使用了。以上就是form的封装，提一句的是，我们可以把表单的所有内容都封装进入，这个我们就搞了一个大而全的内容，剩下的就写数据就好了。后期我还会把其他内容一点点添加进去的，后边继续分享。

以上就是今天的分享了，有不足之处，还请多多留言知道！！！感谢感谢

相关文章

vue 管理后台table封装 juejin.cn/post/699249…

lerna，开发与发布流程 juejin.cn/post/699221…

Promise复习 juejin.cn/post/699183…

let,const复习 juejin.cn/post/699147…

初学koa搭建项目 juejin.cn/post/698756…

正则表达式总结 juejin.cn/post/698615…

flex布局总结 juejin.cn/post/698497…

mongodb基础用法 juejin.cn/post/698364…

vue3搭建管理后台-项目搭建 juejin.cn/post/696802…

工厂模式，构造器模式和原型模式 juejin.cn/post/695794…