JS 表单生成器 form-create

form-create 详细介绍

form-create

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

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

1.3 版本重大更新

• 优化和精简内部结构

• 支持 双向数据绑定!!!

• 支持 全局方法快速创建表单

• 新增 option.mounted事件，当组件加载完成后触发

• 修复 一些BUG

示例 代码

安装

npm install form-create

OR

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

引入

浏览器:

NodeJs:

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

注意! iview版本为2.14.3,Vue版本为2.5.*

使用

//示例规则
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
        $f.model(this.formData);
        
    }
})