组件生成规则
说明
规则生成器的配置方法名称与规则的配置项相同,配置参数也相同

示例
例如生成一个 input 组件:
基础配置
type
- 类型:
string
- 说明: 设置生成的组件名称
field
- 类型:
string
- 说明: 设置表单组件的字段名称,自定义组件可以不配置
title
- 类型:
string|Rule
- 说明: 字段的名称,可以不设置
name
- 类型:
string
- 说明: 设置组件的别名
value
- 类型:
any
- 说明: 表单组件的字段值,自定义组件可以不用设置
info
- 类型:
string|Rule
- 说明: 设置组件的提示信息
- 全局配置说明: element-ui | ant-design-vue
- 配置说明
native
- 类型:
bool
- 说明: 是否原样生成组件,不嵌套的
FormItem
中
hidden
- 类型:
bool
- 说明: 设置组件是否渲染
display
- 类型:
bool
- 说明: 设置组件是否显示
prefix
- 类型:
string|Rule
- 说明: 设置组件的前缀显示
- 配置说明
suffix
- 类型:
string|Rule
- 说明: 设置组件的后缀显示
- 配置说明
通用配置
props
- 参数:
object
- 说明: 设置组件的
props
class
- 参数:
object|string|Array
- 说明: 设置组件的
class
style
- 参数:
object|string
- 说明: 设置组件的
style
on
- 参数:
object
- 说明: 设置组件的事件
directives
- 参数:
object
- 说明: 设置组件的自定义指令
slot
- 参数:
string
- 说明: 设置组件的插槽名称,如果组件是其它组件的子组件,需为插槽指定名称
扩展配置
component
- 类型:
object|Component
- 说明: 定义用于当前规则渲染的组件, 可以无需挂载
- 配置说明
validate
- 类型:
Array
- 说明: 设置表单组件的验证规则
- 配置说明
options
- 类型:
Array|Function
- 说明: 设置
radio
,select
,checkbox
等组件options
选择项,可以通过optionsTo
自定义数据插入的位置
optionsTo
- 类型:
string
- 说明: 设置
options
配置项插入的位置. 例如props.data
inject
- 类型:
any
- 说明: 设置事件注入是的自定义数据
- 配置说明
effect
- 类型:
object
- 说明: 设置自定义属性
- 配置说明
update
- 类型:
ts
//init初始化触发,link关联触发,value变化触发
type Origin = 'init' | 'link' | 'change';
type update = (value:any, api:Api, origin:Origin) => bool|undefined;
//init初始化触发,link关联触发,value变化触发
type Origin = 'init' | 'link' | 'change';
type update = (value:any, api:Api, origin:Origin) => bool|undefined;
说明: 设置 update 回调,可以配合
link
配置项使用
link
- 类型:
Array
- 说明:
link
中配置的字段发生变化后,触发该组件的update
- 配置说明
col
- 类型:
object
- 说明: 设置组件的布局规则
- 配置说明
wrap
- 类型:
object
- 说明: 设置组件的
FormItem
规则 - 配置说明
sync
- 类型:
Array
- 说明: 配置
prop.sync
,设置props
中需要双向绑定属性的名称
control
- 类型:
object
- 说明: 控制其他组件显示
- 配置说明
children
类型:
Array<rule|string|maker>|Function
说明: 设置父级组件的插槽,默认为
default
.可配合slot
配置项使用示例1
jsformCreate.maker.create('button').children([ '按钮内容' ])
formCreate.maker.create('button').children([ '按钮内容' ])
示例2
js
maker.input('text','text','text').children([
maker.create('span').children(['append']).slot('append')
])
maker.input('text','text','text').children([
maker.create('span').children(['append']).slot('append')
])
- 示例3
js
formCreate.maker.create('i-row').children([
formCreate.maker.create('i-col').props('span',12).children([
formCreate.maker.template('<span>自定义组件</span>', () => new Vue)
]),
])
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
参数配合
示例:
js
//以下三种方式效果相同
const rules = [{//emit 方式触发 change 事件
field:'goods_name',
//...
emit:['change']
},{// 自定义 emit 事件前缀,默认为 field 字段
field:'goods_info',
//...
emit:['change'],
emitPrefix:'gi'
},{// 直接在规则写回调方法
field:'goods_tag',
//...
on:{
change:function() {
//TODO
}
}
}]
//以下三种方式效果相同
const rules = [{//emit 方式触发 change 事件
field:'goods_name',
//...
emit:['change']
},{// 自定义 emit 事件前缀,默认为 field 字段
field:'goods_info',
//...
emit:['change'],
emitPrefix:'gi'
},{// 直接在规则写回调方法
field:'goods_tag',
//...
on:{
change:function() {
//TODO
}
}
}]
html
<div id="app">
<form-create :rule="rules" @goods-name-change="change" @gi-change="change"></form-create>
</div>
<div id="app">
<form-create :rule="rules" @goods-name-change="change" @gi-change="change"></form-create>
</div>
js
new Vue({
el:'#app',
data: {
rules:rules
},
methods:{
change:function(){
//TODO
}
}
})
new Vue({
el:'#app',
data: {
rules:rules
},
methods:{
change:function(){
//TODO
}
}
})
emitPrefix
- 类型:
object
- 说明: 自定义 组件
emit
事件的前缀 - 默认: 组件
field
字段 - 配置说明