动态生成form表单,不再为表单烦恼

form-create

动态生成form表单,不再为表单烦恼

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

Github | Gitee |
图例 demo

安装

npm install form-create 复制代码 `npm install form-create

OR

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

运行

npm run dev 复制代码

OR

双击打开 demo/index.html

引入

<!-- import Vue 2.5-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<!-- import iview 2.14.3-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/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)


## 三种模式创建表单
说明: mock() 为表单生成规则 root 为表单插入节点 $f 为表单实例

## 标签模式
标签模式下 rule 规则发生变化会实时动态渲染表单

```

let rules = mock();
new Vue({
    el:'#app1',
    data:{
        //表单生成规则
        rule:rules,
        //组件参数配置
        option:{
            //显示表单重置按钮
            resetBtn:true,
            //表单提交事件
            onSubmit:function (formData) {

                //formData为表单数据

                //按钮进入提交状态
                this.$f.btn.loading();
                //重置按钮禁用
                this.$f.resetBtn.disabled();

                //重置按钮恢复正常
                //this.$f.resetBtn.disabled();
                //按钮进入可点击状态
                //this.$f.btn.loading(false);
            }
        },
        //初始化变量
        $f: {},
        model: {}
    },
    mounted:function () {

        //获取表单api
        this.$f = this.$refs.fc.$f;

        //获取双向数据绑定的数据规则
        this.model = this.$f.model();
    }
});

构造方法

<div id="app2">
    <div id="form-create"></div>
</div>
复制代码let rules = mock();
new Vue({
    el:'#app2',
    data:{
        //初始化变量
        $f:{},
        model:{}
    },
    mounted:function () {

        //表单插入的节点
        const root = document.getElementById('form-create');

        //$f为表单api
        this.$f = this.$formCreate(
            //表单生成规则
            rules,
            //组件参数配置
            {
                el:root,
                //显示表单重置按钮
                resetBtn:true,
                //表单提交事件
                onSubmit:function (formData) {

                    //formData为表单数据

                    //按钮进入提交状态
                    this.$f.btn.loading();
                    //重置按钮禁用
                    this.$f.resetBtn.disabled();

                    //重置按钮恢复正常
                    //this.$f.resetBtn.disabled();
                    //按钮进入可点击状态
                    //this.$f.btn.loading(false);
                }
        });

        //获取双向数据绑定的数据规则
        this.model = this.$f.model();
    }