form-create

A form generation component that can generate dynamic rendering, data colle...

VueForm
xaboy/form-createwww.form-create.com/en/@form-create/iview

README


form-create

MITgithubversionnpmdocumentJS gzip size Join the chat at https://gitter.im/xaboy/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

formCreate V2

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


Update log


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

Docs


简体中文 | English

Files


NameDescription
--------------------------
form-create.jsiViewUI
form-create.elm.jsElementUI

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


  1. ``` sh
  2. npm install form-create
  3. ```

Import


CDN:

iviewUI

  1. ``` html
  2. <script src="//vuejs.org/js/vue.min.js"></script>
  3. <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
  4. <script src="//unpkg.com/iview/dist/iview.min.js"></script>
  5. <script src="//unpkg.com/form-create/dist/form-create.min.js"></script>
  6. ```

elementUI

  1. ``` html
  2. <script src="//vuejs.org/js/vue.min.js"></script>
  3. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  4. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  5. <script src="//unpkg.com/form-create/dist/form-create.elm.min.js"></script>
  6. ```
NodeJs:

iviewUI

  1. ``` js
  2. import formCreate from 'form-create'
  3. import { maker } from 'form-create'
  4. Vue.use(formCreate)
  5. ```

ElementUI

  1. ``` js
  2. import formCreate from 'form-create/element'
  3. import { maker } from 'form-create/element'
  4. Vue.use(formCreate)
  5. ```

Usage


  1. ``` html
  2. <form-create ref="fc" v-model="fApi" :rule="rule" :option="option"></form-create>
  3. ```

NodeJs

  1. ``` js
  2.     import {maker} from 'form-create'
  3.     export default {
  4.         data () {
  5.             return {
  6.                 fApi:{},
  7.                 model: {},
  8.                 rule:[
  9.                     maker.input('goods_name','goods_name'),
  10.                     maker.date('create_at','created_at')
  11.                 ],
  12.                 option:{
  13.                     onSubmit:function (formData) {
  14.                         alert(JSON.stringify(formData));
  15.                     }
  16.                 }
  17.             };
  18.         },
  19.         mounted:function(){
  20.             this.model = this.fApi.model();
  21.         }
  22.     };
  23. ```

Browser

  1. ``` js
  2.     new Vue({
  3.         el:'#app1',
  4.         data:{
  5.             fApi:{},
  6.             model: {},
  7.             rule:[
  8.                 formCreate.maker.input('goods_name','goods_name'),
  9.                 formCreate.maker.date('create_at','created_at')
  10.             ],
  11.             option:{
  12.                 onSubmit:function (formData) {
  13.                     alert(JSON.stringify(formData));
  14.                 }
  15.             }
  16.         },
  17.         mounted:function () {
  18.             this.model = this.fApi.model();
  19.         }
  20.     });
  21. ```

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