# form-create
[](https://github.com/xaboy/form-create/blob/master/LICENSE)
[](https://github.com/xaboy)
[](https://www.npmjs.com/package/form-create)
[](https://www.npmjs.com/package/form-create)
[](http://www.form-create.com)
[](https://www.npmjs.com/package/form-create) [](https://gitter.im/xaboy/form-create?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
**具有动态渲染，数据收集，验证和提交功能的表单生成器，内置17种常用表单组件，支持双向数据绑定，事件扩展，并支持使用json生成内置组件和任何vue组件。**
## 支持
- **iViewUI 2.13.0+**
- **iViewUI 3.x**
- **ElementUI 2.5.2+**
> 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！本项目还在不断开发完善中,如有任何建议或问题[请在这里提出](https://github.com/xaboy/form-create/issues/new)
> 本项目QQ讨论群[28963712](https://jq.qq.com/?_wv=1027&k=54aKUVw)
> **form-create V2 即将发布!!! 速度更快,体积更小,扩展更简单.期待的话点个 star 支持一下吧**
> [更新日志](http://www.form-create.com/guide/update.html)
## 文档
**[简体中文](http://www.form-create.com/) | [English](http://www.form-create.com/en/)**
## 文件
| 文件名 | 说明 |
| ------------------ | ---------------------------------------------------------- |
| form-create.js | iViewUI 版本 |
| form-create.elm.js | ElementUI 版本 |
## 示例
- [CRMEB客户管理+电商管理系统](https://gitee.com/ZhongBangKeJi/CRMEB) ([演示站](http://demo25.crmeb.net) 账号：demo 密码：crmeb.com)
- [自定义组件 案例](https://github.com/HeyMrLin/fc-demo) ([演示站](http://jeekweb.pro/form-create-demo))
- [使用生成器生成](https://jsrun.net/NQhKp/edit)
- [使用 json 生成](https://jsrun.net/NQhKp/edit)
- [各种示例](https://jsrun.net/user/xaboy)
## 图例
## 安装
```shell
npm install form-create
```
## 引入
**CDN:**
iviewUI
```html
```
elementUI
```html
```
**NodeJs:**
iviewUI
```js
import formCreate from 'form-create'
import { maker } from 'form-create'
Vue.use(formCreate)
```
ElementUI
```js
import formCreate from 'form-create/element'
import { maker } from 'form-create/element'
Vue.use(formCreate)
```
## 使用
```html
```
NodeJs
```javascript
import {maker} from 'form-create'
export default {
data () {
return {
fApi:{},
model: {},
//表单生成规则
rule:[
maker.input('商品名称','goods_name'),
maker.date('创建时间','created_at')
],
//组件参数配置
option:{
//表单提交事件
onSubmit:function (formData) {
alert(JSON.stringify(formData));
}
}
};
},
mounted:function(){
this.model = this.fApi.model();
}
};
```
Browser
```javascript
new Vue({
el:'#app1',
data:{
fApi:{},
model: {},
rule:[
formCreate.maker.input('商品名称','goods_name'),
formCreate.maker.date('创建时间','created_at')
],
option:{
onSubmit:function (formData) {
alert(JSON.stringify(formData));
}
}
},
mounted:function () {
this.model = this.fApi.model();
}
});
```
## 参考
- [Vue](https://github.com/vuejs/vue)
- [iViewUI](https://github.com/iview/iview)
- [ElementUI](https://github.com/ElemeFE/element)
- [async-validator](https://github.com/yiminghe/async-validator)
- [PHP版的表单生成器:form-builder](https://github.com/xaboy/form-builder)
## 感谢
[时光弧线](https://github.com/shiguanghuxian) | [wxxtqk](https://github.com/wxxtqk) | [williamBoss](https://github.com/williamBoss) | [HeyMrLin](https://github.com/HeyMrLin) | [djkloop](https://github.com/djkloop)
## 捐赠
## 联系
##### email : xaboy2005@qq.com
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2018-present xaboy