一塊兒來簡化開發吧! 【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 連接。