form-create

 

Form builder with dynamic rendering, data collection, validation and submission capabilities, built-in 17 common form components, support for two-way data binding, event extension, and support for building built-in components and any vue components using json.

中文 README

Support

- iViewUI 2.13.0+
- iViewUI 3.x
- ElementUI 2.5.2+

> If it helps, you can click on "Star" in the upper right corner. Thank you!
> The project is still being developed and improved. If there are any 'recommendations or questions, please ask here

> Form-create V2 is coming soon!!! Faster, smaller, and simpler to expand. If you expect it, please star support.

> Update log

!http://file.lotkk.com/demo-live3.gif
!http://file.lotkk.com/demo-live2.gif

Docs

简体中文 | English

Files

| Name | Description |
| ------------------ | ---------------------------------------------------------- |
| form-create.js | iViewUI Version |
| form-create.elm.js | ElementUI Version |

Example

- In-depth use case of maker customize component (Demo station)

- Generate a form using the maker generator

- Generate a form using the json parameter

- Component example

Legend

!https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

Install

``shell
npm install form-create
`




Import

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)
`

Usage

`html

`
NodeJs
`javascript
import {maker} from 'form-create'
export default {
data () {
return {
fApi:{},
model: {},
rule:[
maker.input('goods_name','goods_name'),
maker.date('create_at','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','goods_name'),
formCreate.maker.date('create_at','created_at')
],
option:{
onSubmit:function (formData) {
alert(JSON.stringify(formData));
}
}
},
mounted:function () {
this.model = this.fApi.model();
}
});
``

Reference

- Vue

- iViewUI
- ElementUI

- async-validator

- PHP form-builder

Thank

时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop

Donation

!donation.jpg

Contact

##### email : xaboy2005@qq.com

License

MIT

Copyright (c) 2018-present xaboy