当前仓库属于暂停状态,部分功能使用受限,详情请查阅 仓库状态说明
2 Star 0 Fork 164

想天皮克斯 / form-create
暂停

forked from FormCreate / form-create 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 6.01 KB
一键复制 编辑 原始数据 按行查看 历史
FormCreate 提交于 2019-03-10 18:48 . 完善说明

form-create

MIT github version npm document JS 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

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

Name Description
form-create.js iViewUI Version
form-create.elm.js ElementUI Version

Example

Legend

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

Install

npm install form-create

Import

CDN:

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/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/dist/form-create.elm.min.js"></script>

NodeJs:

iviewUI

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

ElementUI

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

Usage

<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();
        }
    });

Reference

Thank

时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop

Donation

donation.jpg

Contact

email : xaboy2005@qq.com

License

MIT

Copyright (c) 2018-present xaboy

JavaScript
1
https://gitee.com/tsbrowser/form-create.git
git@gitee.com:tsbrowser/form-create.git
tsbrowser
form-create
form-create
master

搜索帮助