一起来简化开发吧! 【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>

最后

附上 demogithub 链接。

    原文作者:viewweiwu
    原文地址: https://segmentfault.com/a/1190000013974952
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞