阅读 435

vue 管理后台封装form

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

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

问题分析

看下图: image.png

我们封装的只有这两个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…

文章分类
前端
文章标签