好用的表单生成器|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 componen
npm install 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.
> 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.
!http://file.lotkk.com/demo-live3.gif
!http://file.lotkk.com/demo-live2.gif
| Name | Description |
| ------------------ | ---------------------------------------------------------- |
| form-create.js | iViewUI Version |
| form-create.elm.js | ElementUI Version |
- In-depth use case of maker customize component (Demo station)
- Generate a form using the maker generator
- Generate a form using the json parameter
!https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg
``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``
NodeJsjavascript`
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();
}
};`
Browserjavascript``
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();
}
});
- Vue
时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop
##### email : xaboy2005@qq.com
Copyright (c) 2018-present xaboy