JS 表单生成器 form-create

ゝ一纸荒年。 2022-05-16 22:16 160阅读 0赞

form-create 详细介绍

# form-create #

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

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

## 1.3 版本重大更新 ##

*  优化和精简内部结构
 *  支持 双向数据绑定!!!
 *  支持 全局方法快速创建表单
 *  新增 `option.mounted`事件，当组件加载完成后触发
 *  修复 一些BUG

## 示例 [代码][Link 1] ##

[![https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg][https_raw.githubusercontent.com_xaboy_form-create_dev_images_sample110.jpg]][https_raw.githubusercontent.com_xaboy_form-create_dev_images_sample110.jpg_https_raw.githubusercontent.com_xaboy_form-create_dev_images_sample110.jpg]

## 安装 ##

npm install form-create

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

[Link 1]: https://github.com/xaboy/form-create/blob/master/demo/mock.js
[https_raw.githubusercontent.com_xaboy_form-create_dev_images_sample110.jpg]: https://static.oschina.net/uploads/img/201806/27141400_69ZA.jpg
[https_raw.githubusercontent.com_xaboy_form-create_dev_images_sample110.jpg_https_raw.githubusercontent.com_xaboy_form-create_dev_images_sample110.jpg]: https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg