规则配置项
提示
JSON规则的配置项名称与组件生成器的配置方法名称相同,配置参数也相同
内置组件配置项
props
- 参数:
Object - 说明: 组件规则配置
event
- 参数:
Object - 说明: 组件事件配置
validate
- 参数:
Array - 说明: 组件验证规则配置
options
- 参数:
Array - 说明: 部分组件
option选择项配置
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
}
}
})
col
- 参数:
Object - 说明: 组件布局配置
- 参考: 栅格布局规则 Col
emitPrefix 1.5.2+
- 参数:
Object - 说明: 自定义 组件
emit事件的前缀 - 默认: 组件
field字段
className 1.5.3+
- 参数:
Object | Array | string - 说明: 自定义 组件的
class
children 1.6.4+
- 说明: 设置内置组件
slot
maker.input('text','text','text').children([
maker.create('span').children(['append']).slot('append')
])
生成一个 input,并设置输入框后置内容
自定义组件配置项
自定义组件额外支持以下配置项
- children(Array) 子组件元素生成规则
- 示例1
formCreate.maker.create('button').children([
'按钮内容'
]);
- 示例2
formCreate.maker.create('i-row').children([
formCreate.maker.create('i-col').props('span',12),
formCreate.maker.create('i-col').props('span',12),
]);
- 示例3
formCreate.maker.create('i-row').children([
formCreate.maker.create('i-col').props('span',12).children([
formCreate.template('<span>自定义组件</span>',new Vue)
]),
]);
- scopedSlots(Object)
- nativeOn(Object)
- on(Object)
- domProps(Object)
- props(Object)
- attrs(Object)
- style(Object)
- class(Object)
- directives(Array)