Global configuration

Some common properties of components can be configured in the global configuration.

Setting global configuration

  • Component mode
  1. <form-create :option="option"></form-create>
  • Global method
  1. Vm.$formCreate(rule,option)
  2. window.formCreate.create(rule,option)

Composition

The global configuration consists of the following sections.

Basic configuration

  • el: the node into which the form is inserted
  • onSubmit: form submission callback function
  • onReload: callback function after form overloading
  • mounted: callback function after the form is created successfully
  • formData: Form initial value
  • global: component global configuration
  • injectEvent: inject custom parameters in the open event

UI framework configuration

  • form: form overall display rule configuration
  • row: form component layout configuration
  • submitBtn: submit button style configuration
  • resetBtn: reset button style configuration
  • …

Basic configuration

el

  • Type:string | HTMLElement
  • Description: Provides a DOM element that already exists on the page as the mount target for the form, No need to set in component mode

onSubmit

  • Type:Function

  • Parameter:

    • Object formData
    • Object $f

  • Description: Form submission callback function

  • Example:

    Set by option

    1. {
    2.   onSubmit:function(formData,$f){
    3.     //TODO ajax submission form
    4.   }
    5. }

    Set by label

    1. <form-create @on-submit="onSubmit"></form-create>

onReload

  • Type:Function

  • Parameter:

    • Object $f

  • Description: Callback function after form overloading

  • Example:

    Set by option

    1. {
    2.   onReload:function($f){
    3.     //TODO
    4.   }
    5. }

    Set by label

    1. <form-create @on-reload="onReload"></form-create>

mounted

  • Type:Function

  • Parameter:

    • Object $f

  • Description: Callback function after form creation success

  • Example:

    Set by option

    1. {
    2.   Mounted: function($f){
    3.     //TODO
    4.     //The TODO form was created successfully, and the form can be manipulated here.
    5.   }
    6. }

    Set by label

    1. <form-create @mounted="onMounted"></form-create>

injectEvent

  • Type: Boolean

  • Description: Inject custom parameters in the open event

  • Example:

    1.  {
    2.    injectEvent: true
    3.  }

    Data structure of the injected parameters

    1.  {
    2.      $f:Object,//api
    3.      rule:Array, // generation rules
    4.      self:Object, // current generation rule
    5.      option:Object, // global configuration
    6.      inject:Any, // custom injection parameters
    7.  }

formData

  • Type：Object

  • Description：Set the form initial value

  • Example：

    1. {
    2.    field1:  'value1'
    3.    field2:  'value2'
    4.    field3:  'value3'
    5. }

global

Component Common Configuration

  • type: Object

  • Description: Set general rules for all components

  • Example:

    1. {
    2.   Global:{
    3.     // Set all components
    4.     '*':{
    5.       Col:{
    6.         Span:12
    7.       },
    8.       Props:{
    9.         Disabled:false
    10.       }
    11.     }
    12.   }
    13. }

Specify component global configuration

  • type: Object

  • Description: Set the global configuration of the specified component,

  • Example:

    1. {
    2.   Global:{
    3.     // Set the inputNumber component
    4.     'inputNumber':{
    5.       Props:{
    6.         Disabled: true,
    7.         Precision: 2
    8.       }
    9.     }
    10.   }
    11. }

    The component name here must be the same as type in the build rule

UI Configuration