# Rule

# Description

The configuration item name of the JSON rule is the same as the configuration method name of the component generator, and the configuration parameters are the same

For example to generate an input component:

JSON rules

{
  field: 'test',
  type: 'input',
  title: 'textTitle'
  props:{
    disable: true
  },
  on:{
    change:function(){
    }
  }
}

Generate the same rules with Maker

maker.create('input','test','textTitle').props({
    disable: true
  }).on({
    change:function(){
    }
})

# Basic Rules

# type

  • Type: String
  • Description: Set the name of the generated component

# field

  • Type: String
  • Description: Set the field name of the form component, Custom component can not be configured

# title

  • Type: String
  • Description: The name of the component, you can not set

# name

  • Type: String
  • Description: Field name of the custom component

# value

  • Type: any
  • Description: Field values ​​for form components, custom components can be set without

# native

  • Type: Bool
  • Description: Whether to generate components as they are, not nested in FormItem

# hidden

  • Type: Bool
  • Description: Set whether the component is displayed

# info

  • Type: String
  • Description: Set the prompt information for the component
  • Global Configuration Description: iview | element-ui

# className

  • Type: String
  • Description: Set the class of the component

# Extension rules

# validate

  • Type: Array
  • Description: Set validation rules for form components

# options

  • Type: Array
  • Description: Set radio, select, checkbox and other components option options

# inject

  • Type: any
  • Description: Set event injection is custom data

# col

  • Type: Object
  • Description: Set layout rules for components

# control

  • Type: Object
  • Description: Controlling other component displays

description

# children

  • Type: Array<rule|string|maker>
  • Description: Set the slot of the parent component. The default is default. It can be used with the slot configuration item.

  • Example 1
formCreate.maker.create('button').children([
   'Button content'
]);
  • Example 2
maker.input('text','text','text').children([
    Maker.create('span').children(['append']).slot('append')
])
  • Example 3
formCreate.maker.create('i-row').children([
  formCreate.maker.create('i-col').props('span',12).children([
    formCreate.maker.template('<span>custom component</span>', new Vue)
  ]),
]);

# emit

  • Type: Array
  • Description: The event name triggered by the emit mode is configured in component mode, which can be combined with the emitPrefix parameter.

Example:

// The following three ways have the same effect

rules = [{//emit mode triggers change event
    field: 'goods_name',
    //...
    emit:['change']
},{// custom emit event prefix, default is field field
    field: 'goods_info',
    //...
    emit:['change'],
    emitPrefix: 'gi'
},{// write the callback method directly in the rule
     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

  • Type: Object
  • Description: Custom Prefix for component emit event
  • Default: Component field field

# Template Rules

template component must set the parameters, other components do not need to be set

# template

  • Type: string
  • Description: Generate template for template component

# vm

  • Type: Vue|Function
  • Description: Vue sample object for template component for parsing template

# General rules

# props

  • Parameter: Object
  • Description: Set the component's props

# class

  • Parameter: Object|String|Array
  • Description: Set the class of the component

# style

  • Parameter: Object|String
  • Description: Set the style of the component

# attrs

  • Parameter: Object
  • Description: Set the normal HTML features of the component

# domProps

  • Parameter: Object
  • Description: Set the DOM attribute of the component

# on

  • Parameter: Object
  • Description: Set component events

# nativeOn

  • Parameter: Object
  • Description: Native events of the listening component

# directives

  • Parameter: Array
  • Description: Set custom instructions for components

# scopedSlots

  • Parameter: Object
  • Description: Set the slot of the component

# slot

  • Parameter: String
  • Description: Set the slot name of the component. If the component is a subcomponent of another component, specify a name for the slot.

Custom Configuration Item Description