CNlisifan/form-create

具有数据收集、校验和提交功能的表单生成器，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能。

form-create

具有数据收集、校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片上传等功能组件。

1.4.5 版本已支持 iview3

计划

• 内部结构重构
• 性能优化
• 支持 ElementUi

期待就点个赞吧 亲!

开始使用 | 原说明文档

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！

本项目还在不断开发完善中,如有任何建议或问题请在这里提出

本项目QQ讨论群28963712

1.4 版本重大更新

• 新增 使用标签模式生成 <form-create>
• 优化 maker规则生成器
• 新增 生成任意标签组件 `maker.create(componentName)
• 新增 标签模式下支持emit触发事件
• 新增 使用 template 快速生成自定义组件 maker.createTmp(template,vm)
• 支持 iview>=3.1.4版本

更新说明

建议保持在最新版本

1.4.6 (2018-11-25)

• 修复 upload 组件 onRemove 不触发bug
• 修复 ie 下兼容性问题
• 修复 checkbox,radio 组件不能选中 bug
• 修复 滑块组件不传值时默认 NAN bug

1.4.5 (2018-11-12)

• 优化 上传组件图标显示
• 修复 上传组件图片无法删除
• 新增 options.mounted 表单创建成功后的回调函数
• 支持 iview>=3.1.4版本

1.4.4 (2018-11-4)

• 优化 内部功能优化,参数优化
• 新增 使用 reload 更新生成规则 $f.reload(newRules)
• 新增 标签模式下生成规则发生变化时表单自动刷新
• 修复 npm run dev命令无法有时打开 Demo

示例 在线预览

Demo

使用 maker 生成器生成: demo

使用 json 生成: demo

各组件生成: demo

安装

npm install form-create

OR

git clone https://github.com/xaboy/form-create.git
cd form-create
npm install

引入

浏览器:

<!-- import Vue 2.5.16-->
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>

<!-- import iview 2.14.3-->
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.13.0/styles/iview.css">
<script src="https://cdn.bootcss.com/iview/2.13.0/iview.min.js"></script>

<!-- 省市区三级联动json数据,不使用三级联动不需要引入 -->
<script src="district/province_city_area.js"></script>

<!-- 模拟数据,实际使用中不需要引入 -->
<script src="demo/mock.js"></script>

<!-- import formCreate -->
<script src="dist/form-create.min.js"></script>

NodeJs:

import Vue from 'vue'
import iview from 'iview'
import 'iview/dist/styles/iview.css'
import formCreat from 'form-create'
//三级联动数据,不使用三级联动不需要引入
import 'form-create/district/province_city_area.js'
//示例规则,实际使用中不需要引入
import 'form-create/mock.js'
Vue.use(iview)
Vue.use(formCreat)

查看示例

npm run dev

OR

双击打开 demo/index.html

使用

//示例规则
let rules = window.mock;
new Vue({
    data:{
        formData:{}
    },
    mounted:function(){
        let root = document.getElementById('app'),that = this;
        $f = this.$formCreate(mock,{
            el:root,
            onSubmit:function (formData) {
                console.log(formData);
                //提交状态
                $f.btn.loading();
                //点击状态
                //$f.btn.finish();
                //创建第二个表单
                $f2 = that.$formCreate(mock,root);
            }
            });
        //动态添加表单元素
        $f.append($r,'goods_name');
        //绑定表单数据到formData
        this.formData = $f.model();

    }
})

组件模式下使用

<form-create ref="fc" :rule="rule" :option="option"></form-create>

    new Vue({
        el:'#app1',
        data:{
            formData:{},
            rule:mock,
            option:{
                //显示表单重置按钮
                resetBtn:true,
                //表单提交事件
                onSubmit:function (formData) {
                    alert(JSON.stringify(formData));
                    //按钮进入提交状态
                    $f.btn.loading();
                    //重置按钮禁用
                    $f.resetBtn.disabled();
                    //按钮进入可点击状态
//                    $f.btn.finish();
                    //创建第二个表单
                    $f = that.$formCreate(mock,root);
                }
            }
        },
        watch:{
            'formData.address':{
                handler:function (n) {
                    console.log(n);
                },
                deep:true
            }
        },
        mounted:function () {
            $f = this.$refs.fc.$f;
        }
    });

参考

iview框架: iview

validate 表单验证规则，具体配置查看: async-validator

accept 文件类型: attr-accept

icon图标: 图标

form-builder: 使用PHP快速生成现代化表单

感谢

时光弧线 | wxxtqk | williamBoss | 讨论群里的大佬们

联系

联系邮箱 : xaboy2005@qq.com