本周六「上海源创会」,与一线大牛一起聊聊:PHP、Flink、k8s、微服务架构,点击立刻报名!
指数
0
Watch 27 Star 57 Fork 13

xaboy / form-createJavaScriptMIT

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
具有动态渲染,数据收集,验证和提交功能的表单生成器,内置17种常用表单组件,支持双向数据绑定,事件扩展,并支持使用json生成内置组件和任何vue组件。 展开 收起

http://www.form-create.com

克隆/下载
Loading...
README_zh-CN.md

form-create

MIT github version npm document JS gzip size Join the chat at https://gitter.im/xaboy/form-create

具有动态渲染,数据收集,验证和提交功能的表单生成器,内置17种常用表单组件,支持双向数据绑定,事件扩展,并支持使用json生成内置组件和任何vue组件。

支持

  • iViewUI 2.13.0+
  • iViewUI 3.x
  • ElementUI 2.5.2+

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢!本项目还在不断开发完善中,如有任何建议或问题请在这里提出 本项目QQ讨论群28963712

更新日志

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

文档

简体中文 | English

文件

文件名 说明
form-create.js iViewUI 版本
form-create.elm.js ElementUI 版本

示例

图例

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

安装

npm install form-create

引入

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)

使用

<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'),
                    maker.date('创建时间','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'),
                formCreate.maker.date('创建时间','created_at')
            ],
            option:{
                onSubmit:function (formData) {
                    alert(JSON.stringify(formData));
                }
            }
        },
        mounted:function () {
            this.model = this.fApi.model();
        }
    });

参考

感谢

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

捐赠

donation.jpg

联系

email : xaboy2005@qq.com

License

MIT

Copyright (c) 2018-present xaboy

点评 ( 2 )

你可以在登录后,发表评论

搜索帮助

14_float_left_people 14_float_left_close