Vue动态表单-vuedynamicform2

背景

前不久，我在 github 上开源了一个业务工作中沉淀出来的工具 app-info-parser，然后就有了半夜三四点回复 issue 邮件、修 bug 的爽歪歪体验，虽然上完班还要处理 issue 挺累的，但是也算乐在其中。

俗话说得好，开源一时爽，一直开源一直爽，所以我又来了 -。-

我所在的小组主要负责公司的公共服务搭建，组内有不下十个公共服务项目（就我一个前端，太过分了 T_T），每个项目都有配套的 CURD 类的管理系统，随之而来的就是数不清的表单。

不夸张的说，我写表单都快写吐了。作为一个程序员，实在无法容忍自己把时间花在重复的事情上，所以抽时间在 element-ui 和 async-validator 的基础上写了一个动态表单组件 vue-dynamic-form

安利正式开始

安装

NPM 包引入，vue-dynamic-form 名字被占用了（哭瞎），因此在 NPM 中使用的名字是 vue-dynamic-form2

yarn add vue-dynamic-form2
# npm
npm install vue-dynamic-form2

script 标签引入请自行在 github 仓库 中下载对应版本的源码，引入 lib/vue-dynamic-form.umd.min.js

注册

全局注册

import Vue from 'Vue'
import DynamicForm from 'vue-dynamic-form2'

Vue.use(DynamicForm)

组件内注册

<script>
import DynamicForm from 'vue-dynamic-form2'
export default {
  components: {DynamicForm}
}
</script>

简单示例

<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {data () {
    return {
      descriptors: {date: { type: 'date', label: 'date \'s label', required: false},
        number: {type: 'number', label: 'number \'s label', required: true, placeholder:'please input the number'},
        string: {type: 'string', label: 'string \'s label', required: true, pattern: /^test$/g},
        url: {type: 'url', label: 'url \'s label', required: true, placeholder:'please input the url'},
        email: {type: 'email', label: 'email \'s label', required: false},
        enum: {type: 'enum', label: 'enum\'s label', enum: ['value-1','value-2'] }
      },
      data: {}}
  }
}
</script>

生成的表单

复杂表单

vue-dynamic-form 还支持生成嵌套对象的表单, 同时自动加深子表单背景方便区分

<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {data () {
    return {
      descriptors: {
        object: {
          type: 'object',
          label: 'Normal Object',
          fields: {
            object: {
              type: 'object',
              label: 'Child Object',
              fields: {boolean: { type: 'boolean', required: true},
                number: {type: 'number', required: true},
                string: {type: 'string', required: true, pattern: /^test$/g}
              }
            },
            boolean: {type: 'boolean', required: true},
            number: {type: 'number', required: true},
            string: {type: 'string', required: true, pattern: /^test$/g}
          }
        }
      },
      data: {}}
  }
}
</script>

生成的表单

除了嵌套对象，嵌套表单、hashmap 对象也可以很好的支持，更多的使用可以查阅具体文档 vue-dynamic-form docs

相关链接

仓库地址：https://github.com/chenquincy…（走过路过给个 star 呀）

组件文档：https://vue-dynamic-form.quin…