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

kamushin233 发布于2019-08-22 14:53 / 2860人阅读

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

form-create

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

1.4.5版本已支持 iview3

Github | Gitee | Npm | form-create 文档

图例 demo

安装

npm install form-create

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

运行

npm run dev

双击打开 demo/index.html

引入

浏览器:

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)

Demo

使用 maker 生成器生成: demo

使用 json 生成: demo

各组件生成: demo

三种模式创建表单

说明:

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

构造方法

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

})

全局方法

//表单插入的节点
var root = document.getElementById("form-create"),rules = mock();
//初始化变量
var $f = {},model = {};

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

            //formData为表单数据

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

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

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

PHP 表单生成器

GPU云服务器云服务器 form表单校验 form表单插件 form表单判断 form表单提交

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92965.html

typecho插件编写教程3 - 保存配置

摘要：完善信息，使其更接地气插件安装成功，请进入设置填写准入密钥插件卸载成功如何保存配置准入密钥在哪里保存当然是数据库了。此文原本发表于我的博客老高的技术博客，欢迎和老高交流！上一节我们制作了一个裸插件，下面我们开始让我们的插件开始工作！完善方法两个方法我们实现activate和deactivate方法 php public static function...

HmyBmny 2019-07-01 12:13 评论0 收藏0
使用form-create轻松生成高品质的form表单[附原理图]

摘要：目的是节省开发人员在表单页面上耗费的时间，从而更专注于功能开发。使用可快速便捷的生成日常开发中所需的各种表单。可通过后端返回生成规则，进行渲染。 form-create 具有动态渲染、数据收集、校验和提交功能的表单生成器，支持双向数据绑定、事件扩展以及自定义组件，可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。已兼容iview2.和iview3.版本 Github...

phodal 2019-08-23 14:13 评论0 收藏0
自定义表单生成器form-create v2介绍

摘要：介绍是一个可以通过生成具有动态渲染数据收集验证和提交功能的表单生成器。并且支持生成任何组件。结合内置种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。文档 | git...

lufficc 2019-08-23 18:16 评论0 收藏0
vue动态生成表单组件vue-form-maker

摘要：项目地址简介动态生成表单组件可以根据数据配置表单使用的库是在里一般要用到什么组件或数据都得提前声明所以要根据数据来生成表单只能使用的函数要做这一个组件其实并不难看一下官方示例再找个组件库差不多就能写出来如果对项目有兴趣可以或克隆项目自行研究项目地址简介 Vue动态生成表单组件可以根据数据配置表单使用的UI库是iView 在Vue里一般要用到什么组件或数据都得提前声明所以要根...

cjie 2019-08-23 14:16 评论0 收藏0
长期更新，记录一下近期工作中涉及到的内容（DvaJs Ant Design）

摘要：表单域表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发，请尝试使用将下拉弹层渲染节点固定在触发器的父元素中。 DvaJs dispatch在 dva 中，connect Model 的组件通过 props 可以访问到 dispatch，可以调用 Model 中的 Reducer 或者 Effects...

MadPecker 2019-08-26 13:54 评论0 收藏0