一起来简化开发吧! 【form】篇-优快云博客

介绍iViewForm，一款针对Vue的简化表单组件库，支持多种表单元素如input、select等，具备自定义样式及验证功能，兼容iView和Element UI。

前言

大家平时在使用 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，可以自由的分配每个表单元素的大小，它有三种值：

Number 类型，表示每行多少个，例如 grid: 3，表示一行 3 个，玩过 24 点的应该知道，这里的 number 需要被 24 整除。
Array 一维数组，grid: [1, 2, 3]，这样子表示第一排 1 个，第二排 2 个，第三排 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 链接。