自定义表单生成器form-create v2介绍

lufficc 发布于2019-08-23 18:16 / 1902人阅读

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

介绍

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

文档 | github

功能

自定义组件

可生成任何Vue组件

自带数据验证

轻松转换为表单组件

通过 JSON 生成表单

通过 Maker 生成表单

强大的API，可快速操作表单

双向数据绑定

事件扩展

局部更新

数据验证

栅格布局

内置组件17种常用表单组件

对比 1.x

速度更快

体积更小

更强大的全局配置

自定义组件更容易扩展

更容易支持第三方 UI 库

更少的 bug

示例

通过 JSON 创建表单

通过 API 操作表单

@form-create包说明

名称	说明
@form-create/iview	iview 版表单生成器
@form-create/element-ui	element-ui 版表单生成器
@form-create/core	form-create 核心包
@form-create/utils	form-create 工具包
@form-create/data	省市区多级联动数据

使用

以element-ui版本为例介绍如何在项目中使用 form-create

安装

npm i @form-create/element-ui

挂载

全局注册

import formCreate form "@form-create/element-ui";

Vue.use(formCreate);

局部挂载

import formCreate form "@form-create/element-ui";

export default {
    components:{
        formCreate:formCreaet.$form()
    }
}

生成表单

export default {
  data () {
    return {
     //表单实例对象 $f
     fApi:{},
     //表单生成规则
     rule:[
       {
          type:"input",
          field:"goods_name",
          title:"商品名称"
        },
        {
          type:"datePicker",
          field:"created_at",
          title:"创建时间"
        }
     ]
    };
  },
  methods:{
      onSubmit(formData){
          //TODO 提交表单
      }
  }
};

效果

实例对象 $f

可以通过 $f 快速操作表单，例如：

$f.hidden：隐藏指定组件

$f.validate：验证表单

$f.setValue：修改表单组件的值

$f.append：追加表单组件

自定义组件 生成

通过标签生成

{
    type:"el-button",
    name: "btn",
    props:{
        type:"primary",
        field:"btn",
        loading:true
    },
    children:["加载中"]
}

通过模板生成

{
    type:"template",
    name:"btn"
    template:"{{text}}",
    vm: new Vue({
      data:{
        loading:true,
        text:"加载中"
      }
    })
}

转换为表单组件

自定义组件转换为表单组件后，可通过$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作组件，达到和内置组件相同的效果

预定义

props

在自定义组件内部通过props接收一下属性

value 表单的值

disabled 组件的禁用状态

例如:

vm = Vue({
  props:{
   value:String,
   disabled:Boolean      
  }
})

input 事件

通过input事件更新组件内部的值

当组件值发生变化后,通过 input 事件更新值.例如:

vm.$emit("input",newValue);

挂载自定义组件

要生成的自定义组件必须通过Vue.component方法挂载到全局,或者通过formCreate.component方法挂载

例如:

formCreate.component("TestComponent",component);

或者

Vue.component("TestComponent",component);

生成

表单组件必须定义field属性

JSON

{
    type:"TestComponent",
    value:"test",
    field:"testField",
    title:"自定义组件"
}

Maker

formCreate.maker.create("TestComponent","testField","自定义组件").value("test")

示例

自定义计数器按钮组件,获取按钮点击数.该组件的功能和内置组件相同

formCreate.maker.template("计数器-{{num}}", new Vue({
  props:{
    //预定义
    disabled:Boolean,
    value:Number,
  },
  data: function () {
    return {
        num: this.value,
    }
  },
  watch:{
    value(n){
        this.num = n;
    }
  },
  methods: {
    onClick: function () {
        this.num++;
        //更新组件内部的值
        this.$emit("input",this.num);
    },
  },
}), "tmp", "自定义 title").value(100).props("disabled",false)

完整示例

云服务器 GPU云服务器表单自定义自定义表单自定义表单工具自定义表单软件

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

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

使用form-create轻松生成高品质的form表单[附原理图]

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

phodal 2019-08-23 14:13 评论0 收藏0
动态生成form表单,不再为表单烦恼

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

kamushin233 2019-08-22 14:53 评论0 收藏0
使用form-create动态生成vue组件,支持json格式

摘要：说明文档示例商品名称商品加个创建时间是否显示显示不显示通过建立一个虚拟的方式生成自定义组件生成上面的代码是通过生成器动态生成一个正在加载的按钮组件上面的代码是通过方式动态生成一个按钮组件修改可以通过一下两种方式动态修改组件的配置项通 [github] | [说明文档] 示例 showImg(https://segmentfault.com/img/remote/1460000017...

happyhuangjinjin 2019-08-23 14:48 评论0 收藏0
PHP快速生成现代化form表单，就是好用

摘要：表单生成器，使用快速创建现代化的表单，包含复选框单选框输入框下拉选择框等元素以及省市区三级联动时间选择日期选择颜色选择文件图片上传等功能。 form-builder PHP表单生成器，使用PHP快速创建现代化的form表单，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 Github地址 | Composer地址 ...

notebin 2019-07-01 10:13 评论0 收藏0