一块儿来简化开发吧! 【form】篇

前言

你们平时在使用 vue 开发的时候会用什么组件库呢？
iView 和 element-ui，这俩是 PC 端很受欢迎的两个组件库。
这俩组件库里都有一个组件叫 form，是很是经常使用的组件之一。
可是写一个 form 须要有不少的代码，因此我封装了一个更加方便使用的组件 iViewForm，目的是为了让 form 写起来更简单。

用法

一个最简单的例子，声明一个 formList，里面的对象指 type 为 input，那么就会生成一个 input。

<template>
  <iViewForm @submit="onSubmit" :formList="formList"></iViewForm>
</template>

<script>
import iViewForm from 'iview-form'

export default {
  components: {
    iViewForm
  },
  data() {
    return {
      formList: [
        {
          title: '姓名',
          type: 'input',
          key: 'name'
        }
      ]
    }
  },
  methods: {
    onSubmit(form, valid) {
      console.log(form, valid)
    }
  }
}
</script>

是否是挺简单的呢？

多种表单元素

固然 type 的种类是不少的，如今已经覆盖了大部分的 form 元素了。
如今支持的 type 有 input、select、checkbox、radio、switch、datepicker、slider。

grid 布局

考虑到 form 的每一行元素显示的个数不必定是一个，因此加上了 grid 这个 api，能够自由的分配每一个表单元素的大小，它有三种值：

1. Number 类型，表示每行多少个，例如 grid: 3，表示一行 3 个，玩过 24 点的应该知道，这里的 number 须要被 24 整除。
2. Array 一维数组，grid: [1, 2, 3]，这样子表示第一排 1 个，第二排 2 个，第三排 3 个。
3. Array 二维数组，grid: [[6, 12, 6], [12, 12]]，这样表示第一排有 3 个元素，第一个占 6，第二个占 12，第三个占 6，第二排有 2 个元素，每一个占 12。

三种 gird 的使用，知足了不一样布局的需求。

自定义

可能考虑到有些同窗会加入其它的元素（好比按钮和图片上传），固然也时能够作到的，经过 renderTitle 和 renderContent 能够自定义这个表单元素长什么样。

校验

固然也支持每个表单元素校验，只要给元素加上 rule 就能够了，在 submit 时，会自动的去 validate 的，而且把结果返回。

兼容

考虑到有的人用 iView，有的人用 element-ui，这里我作了兼容，只要在标签上加上 lib="element" 就会变成 element-ui 的组件，用法是差很少的。

<iViewForm lib="element" @submit="onSubmit" :formList="formList"></iViewForm>

最后

附上 demo 和 github 连接。