规则配置项

提示

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

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,并设置输入框后置内容

自定义组件配置项

自定义组件额外支持以下配置项

  1. 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)
     ]),
  ]);
  1. scopedSlots(Object)
  2. nativeOn(Object)
  3. on(Object)
  4. domProps(Object)
  5. props(Object)
  6. attrs(Object)
  7. style(Object)
  8. class(Object)
  9. directives(Array)

自定义配置项说明