# Custom components

Form-create supports generating any vue components inside the form

Warn

  • Custom components must be generated beforeMount or register v2.5.0+
  • Only when you need to get the generation rules of the component through the fApi.component() method, you need to define the name property
  • When you need to make a custom component and a built-in component have the same function, you can convert it toForm component

# Mount custom components

The components generated by form-create need to be mounted in the following ways before they can be generated.

Warn

  1. Test Component is a custom component
  2. 1.x version uses partial mounting method to mount components need to be executed before mounting form-create

Global mount

Vue.component(TestComponent) 

Partial mount

formCreate.component(TestComponent.name, TestComponent) 

# Generate components from tags

Generate custom components by creating a virtual DOM

# Generate

{ type:'i-button', name: 'btn', props:{	type:'primary',	field:'btn',	loading:true }, children:['loading'] } 

# Modify

Obtain and modify the generation rules of the component through the fApi.component() method

fApi.component().btn.props.loading = false 

# Example

Layout through custom components

# Generate components from templates

Generate custom components through template, Not recommended

# Generate

{ type:'template', name:'btn' template:'<i-button :loading="loading">{{text}}<i-button>', vm(){ return new Vue({ data:{ loading:true, text:'loading' } }) } } 

# Predefined props

When the component is generated, the following parameters will be injected into the custom component

  • formCreate fApi
  • formCreateField The field of the form component, may be empty
  • formCreateOptions Generate rule options
  • formCreateRule Generation rules