背景
前不久,我在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# npmnpm 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...