Form-create is a form generator that can generate dynamic rendering, data collection, validation, and submission via JSON. And support for generating any Vue components. Combined with the built-in 17 common form components and custom components, complex forms can be easily handled.
- iViewUI 2.13.0+
- iViewUI 3.x
- iViewUI 4.x
- ElementUI 2.8.2+
- Ant-design-vue 1.5.3+
If you have a form component suitable for form-create, please feel free to click here to leave a message
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
- Preview
More
- Form operations
groupcomponent
controlconfiguration
| Name | Description |
|---|---|
| @form-create/iview | iView Version |
| @form-create/iview4 | iView V4 Version |
| @form-create/element-ui | ElementUI Version |
| @form-create/ant-design-vue | Ant-design-vue Version |
Legend
iview 2.x|3.x
npm install @form-create/iviewiview 4.x
npm install @form-create/iview4elementUI
npm install @form-create/element-uiant-design-vue
npm install @form-create/ant-design-vueCDN:
iviewUI
<!-- 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/[email protected]/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/[email protected]/dist/antd.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>NodeJs:
iviewUI
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)<form-create ref="fc" v-model="fApi" :rule="rule" :option="option"></form-create>NodeJs
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
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();
}
});Download project
$ git clone https://github.com/xaboy/form-create.git
$ cd form-createInstall dependencies
$ npm run bootstrapIview 2.x|3.x Demo
$ npm run dev:iviewIview 4.x Demo
$ npm run dev:iview4ElementUI Demo
$ npm run dev:eleant-design-vue Demo
$ npm run dev:antd时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop | JetBrains
email : [email protected]
Copyright (c) 2018-present xaboy
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent