form-create 组件生成规则说明
本文介绍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 fastadmin(生成表单元素)
Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- django之分页器、多对多关系、form校验组件
批量插入数据 bulk_create # 1.往书籍表中插入数据 1000 # for i in range(1000): # 这种插入方式 效率极低 # models.Book.objects.cr ...
- apidoc快速生成在线文档,apidoc生成静态文件的生成规则以及原理分析
在老大的指引下,需要将系统的json文件格式转换成apidoc的json格式,也就是json格式的重组,但是这个apidoc的生成格式是不固定的,因为apidoc有自己一套的生成规则,我需要研究一下是 ...
- Java规则引擎drools:drt动态生成规则并附上具体项目逻辑
一 整合 由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的项目地址https://github.com/247292980/spring-boot 以整 ...
- React: 有状态组件生成真实DOM结点
上次我们分析了无状态组件生成 DOM 的过程,无状态组件其实就是纯函数,它不维护内部的状态,只是根据外部输入,输出一份视图数据.而今天我们介绍的有状态组件,它有内部的状态,因此在组件的内部,可以自行对 ...
- Oracle中使用hash_hmac() 函数报错问题/以及Oracle遇到Oauth1.0授权和oauth_signature生成规则
最近在Oracle上发现使用hash_hmac()报找不到此函数.为此特意查到oracle的文档.详细请看官网回答:https://cx.rightnow.com/app/answers/detail ...
- C#dll版本号默认生成规则
原文:C#dll版本号默认生成规则 1.版本号自动生成方法 只需把 AssemblyInfo.cs文件中的[assembly: AssemblyVersion("1.0.0.0") ...
随机推荐
- #Google HTML&CSS规范指南
Google HTML&CSS规范指南 翻译自原文 目录 Google HTML&CSS规范指南 1. 背景 2. 通用 2.1 通用样式规则 2.1.1 协议 2.2 通用格式规则 ...
- 从别人的代码中学习golang系列--01
自己最近在思考一个问题,如何让自己的代码质量逐渐提高,于是想到整理这个系列,通过阅读别人的代码,从别人的代码中学习,来逐渐提高自己的代码质量.本篇是这个系列的第一篇,我也不知道自己会写多少篇,但是希望 ...
- 利用搭载好的工控机环境跑yolov3-tiny
辛辛苦苦搭载好GPU环境现在要开始测试下效果 1,准备好数据集 2,测试开始 (1),如果尚未安装Darknet,则应先进行安装 git clone https://github.com/pjredd ...
- springboot集成springDataJpa
1.引用依赖 <!--spring-data-jpa--> <dependency> <groupId>org.springframework.boot</g ...
- html中map area 热区自适应的原生js实现方案
在做自适应网页的时候,如果在图片中使用了热区map.图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应.这篇文章就介绍通过原生js来实现:MAP中每 ...
- 03.springboot 整合RabbitMQ
1.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- PE文件结构详解(三)
0x01 前言 上一篇讲到了数据目录表的结构和怎找到到数据目录表(DataDirectory[16]),这篇我们我来讲讲数据目录表后面的另一个结构——区块表. 0x01 区块 区块就是PE载入器将PE ...
- python使用数组实现链表的策略分析
python实现链表数据结构:数组/节点与引用 使用数组策略: 使用数组存储指向其他对象的引用 数组存储空间过度分配 数组填满后,分配一个更大的数组,将旧数组的内容复制到新数组中 class Arra ...
- 关于小白一天摆弄Axure产品原型的心得
因为项目所需,被迫快速设计产品原型,制作app使用视频,这里简单分享一些一个小白第一次触碰产品原型设计的一些心得: 原型设计工具的选用 我这里针对的是贫穷学生党,分享的是自己尝试的几款.有钱大佬自行绕 ...
- node子进程(Child Process)获取硬盘分区
node child_process文档 child_process.exec(command[, options][, callback]) command <string> The ...