本文介绍form-create生成规则与组件的关系

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

如果对您有帮助,您可以在 GitHub 上给作者点个"Star" 支持一下 谢谢!

下图为组件生成规则和组件的关系说明

form-create 规则详细说明

基础规则

type

  • ​类型: String
  • 说明: 设置生成组件的名称

field

  • ​类型: String
  • 说明: 设置表单组件的字段名称,自定义组件可以不配置

title

  • ​类型: String
  • 说明: 组件的名称,可以不设置

name

  • ​类型: String
  • 说明: 自定义组件的字段名称

value

  • ​类型: any
  • 说明: 表单组件的字段值,自定义组件可以不用设置

className

  • ​类型: String
  • 说明: 设置组件的class

info

  • ​类型: String
  • 说明: 设置组件的提示信息
  • 全局配置说明: iview | element-ui

native

  • ​类型: Bool
  • 说明: 是否原样生成组件,不嵌套的FormItem

hidden

  • ​类型: Bool
  • 说明: 设置组件是否显示

扩展规则

validate

  • 类型: Array
  • 说明: 设置表单组件的验证规则

options

  • 类型: Array
  • 说明: 设置radio,select,checkbox等组件option选择项

inject

  • 类型: any
  • 说明: 设置事件注入是的自定义数据

col

  • 类型: Object
  • 说明: 设置组件的布局规则

control

  • 类型: Object
  • 说明: 控制其他组件显示

   详细说明

children

  • 类型: Array<rule|string|maker>

  • 说明: 设置父级组件的插槽,默认为default.可配合 slot 配置项使用

    • 示例1
    formCreate.maker.create('button').children([
    '按钮内容'
    ]);
    • 示例2
    maker.input('text','text','text').children([
    maker.create('span').children(['append']).slot('append')
    ])
    • 示例3
    formCreate.maker.create('i-row').children([
    formCreate.maker.create('i-col').props('span',12).children([
    formCreate.maker.template('<span>自定义组件</span>',new Vue)
    ]),
    ]);

emit

  • 类型: Array
  • 说明: 组件模式下配置使用emit方式触发的事件名,可与emitPrefix参数配合

示例:

//以下三种方式效果相同

rules = [{//emit 方式触发 change 事件
field:'goods_name',
//...
emit:['change']
},{// 自定义 emit 事件前缀,默认为 field 字段
field:'goods_info',
//...
emit:['change'],
emitPrefix:'gi'
},{// 直接在规则写回调方法
field:'goods_tag',
//...
event:{
change:function() {
//TODO
}
}
}]
<div id="app">
<form-create :rule="rules" @goods-name-change="change" @gi-change="change"></form-create>
</div>
new Vue({
el:'#app',
data: {
rules:rules
},
methods:{
change:function(){
//TODO
}
}
})

emitPrefix

  • 类型: Object
  • 说明: 自定义 组件emit事件的前缀
  • 默认: 组件 field 字段

模板规则

template 组件必须设置一下参数,其他组件无需设置

template

  • 类型: string
  • 说明: 模板组件的生成模板

vm

  • 类型: Vue|Function
  • 说明: 模板组件的 Vue 示例对象,用于解析模板

通用规则

props

  • ​参数: Object
  • 说明: 设置组件的props

class

  • ​参数: Object|String|Array
  • 说明: 设置组件的class

style

  • ​参数: Object|String
  • 说明: 设置组件的style

attrs

  • ​参数: Object
  • 说明: 设置组件普通的 HTML 特性

domProps

  • ​参数: Object
  • 说明: 设置组件的 DOM 属性

on

  • ​参数: Object
  • 说明: 设置组件的事件

nativeOn

  • ​参数: Object
  • 说明: 监听组件的原生事件

directives

  • ​参数: Array
  • 说明: 设置组件的自定义指令

scopedSlots

  • ​参数: Object
  • 说明: 设置组件的插槽

slot

  • ​参数: String
  • 说明: 设置组件的插槽名称,如果组件是其它组件的子组件,需为插槽指定名称

自定义配置项说明

form-create教程系列:

form-create教程:移除默认提交按钮

form-create教程:给内置组件和自定义组件添加事件

form-create教程:自定义布局,实现一行多个组件

form-create 组件生成规则说明的更多相关文章

  1. 表单组件 form fastadmin(生成表单元素)

    Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...

  2. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  3. 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  4. django之分页器、多对多关系、form校验组件

    批量插入数据 bulk_create # 1.往书籍表中插入数据 1000 # for i in range(1000): # 这种插入方式 效率极低 # models.Book.objects.cr ...

  5. apidoc快速生成在线文档,apidoc生成静态文件的生成规则以及原理分析

    在老大的指引下,需要将系统的json文件格式转换成apidoc的json格式,也就是json格式的重组,但是这个apidoc的生成格式是不固定的,因为apidoc有自己一套的生成规则,我需要研究一下是 ...

  6. Java规则引擎drools:drt动态生成规则并附上具体项目逻辑

    一 整合 由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的项目地址https://github.com/247292980/spring-boot 以整 ...

  7. React: 有状态组件生成真实DOM结点

    上次我们分析了无状态组件生成 DOM 的过程,无状态组件其实就是纯函数,它不维护内部的状态,只是根据外部输入,输出一份视图数据.而今天我们介绍的有状态组件,它有内部的状态,因此在组件的内部,可以自行对 ...

  8. Oracle中使用hash_hmac() 函数报错问题/以及Oracle遇到Oauth1.0授权和oauth_signature生成规则

    最近在Oracle上发现使用hash_hmac()报找不到此函数.为此特意查到oracle的文档.详细请看官网回答:https://cx.rightnow.com/app/answers/detail ...

  9. C#dll版本号默认生成规则

    原文:C#dll版本号默认生成规则 1.版本号自动生成方法 只需把 AssemblyInfo.cs文件中的[assembly: AssemblyVersion("1.0.0.0") ...

随机推荐

  1. #Google HTML&CSS规范指南

    Google HTML&CSS规范指南 翻译自原文 目录 Google HTML&CSS规范指南 1. 背景 2. 通用 2.1 通用样式规则 2.1.1 协议 2.2 通用格式规则 ...

  2. 从别人的代码中学习golang系列--01

    自己最近在思考一个问题,如何让自己的代码质量逐渐提高,于是想到整理这个系列,通过阅读别人的代码,从别人的代码中学习,来逐渐提高自己的代码质量.本篇是这个系列的第一篇,我也不知道自己会写多少篇,但是希望 ...

  3. 利用搭载好的工控机环境跑yolov3-tiny

    辛辛苦苦搭载好GPU环境现在要开始测试下效果 1,准备好数据集 2,测试开始 (1),如果尚未安装Darknet,则应先进行安装 git clone https://github.com/pjredd ...

  4. springboot集成springDataJpa

    1.引用依赖 <!--spring-data-jpa--> <dependency> <groupId>org.springframework.boot</g ...

  5. html中map area 热区自适应的原生js实现方案

    在做自适应网页的时候,如果在图片中使用了热区map.图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应.这篇文章就介绍通过原生js来实现:MAP中每 ...

  6. 03.springboot 整合RabbitMQ

    1.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  7. PE文件结构详解(三)

    0x01 前言 上一篇讲到了数据目录表的结构和怎找到到数据目录表(DataDirectory[16]),这篇我们我来讲讲数据目录表后面的另一个结构——区块表. 0x01 区块 区块就是PE载入器将PE ...

  8. python使用数组实现链表的策略分析

    python实现链表数据结构:数组/节点与引用 使用数组策略: 使用数组存储指向其他对象的引用 数组存储空间过度分配 数组填满后,分配一个更大的数组,将旧数组的内容复制到新数组中 class Arra ...

  9. 关于小白一天摆弄Axure产品原型的心得

    因为项目所需,被迫快速设计产品原型,制作app使用视频,这里简单分享一些一个小白第一次触碰产品原型设计的一些心得: 原型设计工具的选用 我这里针对的是贫穷学生党,分享的是自己尝试的几款.有钱大佬自行绕 ...

  10. node子进程(Child Process)获取硬盘分区

    node   child_process文档 child_process.exec(command[, options][, callback]) command <string> The ...