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

Update log

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

Install

npm install form-create

Import

CDN:

iviewUI

<!-- import Vue.js --><scriptsrc="//vuejs.org/js/vue.min.js"></script><!-- import stylesheet --><linkrel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"><!-- import iView --><scriptsrc="//unpkg.com/iview/dist/iview.min.js"></script><!-- import form-create/iview --><scriptsrc="//unpkg.com/form-create/dist/form-create.min.js"></script>

elementUI

<!-- import Vue.js --><scriptsrc="//vuejs.org/js/vue.min.js"></script><!-- import stylesheet --><linkrel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- import element --><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script><!-- import form-create/element --><scriptsrc="//unpkg.com/form-create/dist/form-create.elm.min.js"></script>

NodeJs:

iviewUI

importformCreatefrom'form-create'import{maker}from'form-create'Vue.use(formCreate)

ElementUI

importformCreatefrom'form-create/element'import{maker}from'form-create/element'Vue.use(formCreate)

Usage

<form-createref="fc" v-model="fApi" :rule="rule" :option="option"></form-create>

NodeJs

import{maker}from'form-create'exportdefault{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

newVue({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

Contact

email : xaboy2005@qq.com

License

MIT

Copyright (c) 2018-present xaboy