xaboy form-createJS 表单生成器-技术圈

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

功能

支持3种 UI 框架

自定义组件
- 可生成任何Vue组件
- 自带数据验证
- 可快速扩展
- 轻松转换为表单组件

通过 JSON 生成表单

通过 Maker 生成表单

全局配置
- 可以设置表单配置
- 可以设置指定组件全局配置
- 可以设置所有组件公共的全局配置

强大的API，可快速操作表单

双向数据绑定

事件扩展

局部更新

数据验证

栅格布局

嵌套对象，组件数组

内置组件
- hidden
- input
- inputNumber
- checkbox
- radio
- switch
- select
- autoComplete
- cascader
- colorPicker
- datePicker
- timePicker
- rate
- slider
- upload
- tree
- frame
- group

预览

包说明

包名	说明
@form-create/iview	iview 版本
@form-create/iview4	iView V4 版本
@form-create/element-ui	ElementUI 版本
@form-create/ant-design-vue	Ant-design-vue 版本

安装

iview 2.x|3.x



npm install @form-create/iview

iview 4.x



npm install @form-create/iview4

elementUI



npm install @form-create/element-ui

ant-design-vue



npm install @form-create/ant-design-vue

引入

CDN:

iview



<!-- import Vue.js -->

<script src="//vuejs.org/js/vue.min.js"></script>

<!-- import stylesheet -->

<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">

<!-- import iView -->

<script src="//unpkg.com/iview/dist/iview.min.js"></script>

<!-- import form-create/iview -->

<script src="//unpkg.com/@form-create/iview/dist/form-create.min.js"></script>

elementUI



<!-- import Vue.js -->

<script src="//vuejs.org/js/vue.min.js"></script>

<!-- import stylesheet -->

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- import element -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!-- import form-create/element -->

<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>

ant-design-vue



<!-- import Vue.js -->

<script src="//vuejs.org/js/vue.min.js"></script>

<!-- import stylesheet -->

<link href="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css" rel="stylesheet">

<!-- import moment -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script>

<!-- import ant-design-vue -->

<script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"></script>

<!-- import form-create -->

<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>

NodeJs:

iview



import formCreate from '@form-create/iview'

Vue.use(formCreate)

ElementUI



import formCreate from '@form-create/element-ui'

Vue.use(formCreate)

ant-design-vue



import formCreate from '@form-create/ant-design-vue'

Vue.use(formCreate)