form-create

# Global configuration

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

# Set global configuration

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

# Configuration item

The global configuration consists of the following parts.

Basic configuration

  • el：Node inserted into the form
  • onSubmit：Form submission callback function
  • onReload：Callback function after form overload
  • mounted：Callback function after the form is created successfully
  • formData：Form data
  • global：Component global configuration
  • injectEvent：Inject custom parameters into the opening event
  • page: Page configuration v2.5.0+

UI framework configuration

  • form：Overall form display rule configuration
  • row：Form component layout configuration
  • submitBtn：Submit button style configuration
  • resetBtn：Reset button style configuration
  • info: Default configuration of component info
  • wrap: Component wrap default configuration v2.5.0+

# UI placement

# Example

# 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

  • Parameters:

    • Object formData
    • Object fApi

  • Description: Form submission callback function

  • Example:

    Set by option

    {
  onSubmit:function(formData,fApi){
    //TODO ajax submission form
  }
}

    Set by label

    <form-create @submit="onSubmit"></form-create>

# onReload

  • Type:Function

  • Parameters：

    • Object fApi

  • Description: Callback function after form overloading

  • Example:

    Set by option

    {
  onReload:function(fApi){
    //TODO 
  }
}

    Set by label

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

# mounted

  • Type:Function

  • Parameters：

    • Object fApi

  • Description: Callback function after form creation success

  • Example:

    Set by option

    {
  Mounted: function(fApi){
    //TODO
    //The TODO form was created successfully, and the form can be manipulated here.
  }
}

    Set by label

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

# injectEvent v0.0.5+

  • Type: Boolean

  • Description: Inject custom parameters in the open event

  • Example:

    {
  injectEvent:  true
}

Data structure of the injected parameters    js    {        $f:Object,//api        rule:Array, // generation rules        self:Object, // current generation rule        option:Object, // global configuration        inject:Any, // custom injection parameters    }

# formData v1.0.4+

  • Type：Object

  • Description：Set the form initial value

  • Example：

    {
   field1:  'value1'
   field2:  'value2'
   field3:  'value3'
}

# global

# Component Common Configuration

  • type: Object

  • Description: Set general rules for all components

  • Example:

    {
  global:{
    //Set up all components
    '*':{
      col:{
        span:12
      },
      props:{
        disabled:false
      }
    }
  }
}

# Specify component global configuration

  • type: Object

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

  • Example:

    {
  global:{
    //Set the inputNumber component
    'inputNumber':{
      props:{
        disabled:true,
        precision:2
      }
    }
  }
}

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

← Maker →