\n\n\n# form-create\n\n[](https://github.com/xaboy/form-create/blob/master/LICENSE)\n[](https://github.com/xaboy)\n[](https://www.npmjs.com/package/form-create)\n[](https://www.npmjs.com/package/form-create)\n[](http://www.form-create.com)\n[](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)\n\n\n**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.**\n\n[中文 README](https://github.com/xaboy/form-create/blob/dev/README_zh-CN.md)\n\n## Support\n- **iViewUI 2.13.0+**\n- **iViewUI 3.x**\n- **ElementUI 2.5.2+**\n\n> If it helps, you can click on \"Star\" in the upper right corner. Thank you!\n> The project is still being developed and improved. If there are any 'recommendations or questions, please ask [here](https://github.com/xaboy/form-create/issues/new)\n\n> **Form-create V2 is coming soon!!! Faster, smaller, and simpler to expand. If you expect it, please star support.**\n\n> [Update log](http://www.form-create.com/en/guide/update.html)\n\n\n\n\n\n\n\n## Docs\n\n**[简体中文](http://www.form-create.com/) | [English](http://www.form-create.com/en/)**\n\n\n\n## Files\n\n| Name | Description |\n| ------------------ | ---------------------------------------------------------- |\n| form-create.js | iViewUI Version |\n| form-create.elm.js | ElementUI Version |\n\n\n\n## Example\n\n- [In-depth use case of maker customize component](https://github.com/HeyMrLin/fc-demo) ([Demo station](http://jeekweb.pro/form-create-demo))\n\n- [Generate a form using the maker generator](https://jsrun.net/NQhKp/edit)\n\n- [Generate a form using the json parameter](https://jsrun.net/NQhKp/edit)\n\n- [Component example](https://jsrun.net/user/xaboy)\n\n\n\n\n## Legend\n\n\n\n\n\n## Install\n\n```shell\nnpm install form-create\n```\n\n\n## Import\n\n**CDN:**\n\niviewUI\n```html\n\n\n\n\n\n\n\n\n```\n\nelementUI\n```html\n\n\n\n\n\n\n\n\n```\n**NodeJs:**\n\niviewUI\n```js\nimport formCreate from 'form-create'\nimport { maker } from 'form-create'\nVue.use(formCreate)\n```\n\nElementUI\n```js\nimport formCreate from 'form-create/element'\nimport { maker } from 'form-create/element'\nVue.use(formCreate)\n```\n\n## Usage\n\n```html\n\n```\nNodeJs\n```javascript\n import {maker} from 'form-create'\n export default {\n data () {\n return {\n fApi:{},\n model: {},\n rule:[\n maker.input('goods_name','goods_name'),\n maker.date('create_at','created_at')\n ],\n option:{\n onSubmit:function (formData) {\n alert(JSON.stringify(formData));\n }\n }\n };\n },\n mounted:function(){\n this.model = this.fApi.model();\n }\n };\n```\nBrowser\n```javascript\n new Vue({\n el:'#app1',\n data:{\n fApi:{},\n model: {},\n rule:[\n formCreate.maker.input('goods_name','goods_name'),\n formCreate.maker.date('create_at','created_at')\n ],\n option:{\n onSubmit:function (formData) {\n alert(JSON.stringify(formData));\n }\n }\n },\n mounted:function () {\n this.model = this.fApi.model();\n }\n });\n```\n\n## Reference\n\n- [Vue](https://github.com/vuejs/vue)\n\n- [iViewUI](https://github.com/iview/iview)\n- [ElementUI](https://github.com/ElemeFE/element)\n\n- [async-validator](https://github.com/yiminghe/async-validator)\n\n- [PHP form-builder](https://github.com/xaboy/form-builder)\n\n\n## Thank\n\n[时光弧线](https://github.com/shiguanghuxian) | [wxxtqk](https://github.com/wxxtqk) | [williamBoss](https://github.com/williamBoss) | [HeyMrLin](https://github.com/HeyMrLin) | [djkloop](https://github.com/djkloop)\n\n## Donation\n\n\n\n## Contact\n\n##### email : xaboy2005@qq.com\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2018-present xaboy\n","readmeFilename":"README.md"}
![](\"http://file.lotkk.com/form-create.png\")
\n \n