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

<template>
<div>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
</div>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                       {
                         type:'ElRow',
                         children:[
                           {
                             type:'ElCol',
                             props:{
                               span:12
                             },
                             children:[
                               formCreate.maker.input('商品名称','goods_name','iphone'),
                               formCreate.maker.number('商品价格','goods_price',8688)
                             ]
                           },
                           {
                             type:'ElCol',
                             props:{
                               span:12
                             },
                             children:[
                               formCreate.maker.radio('是否显示','is_show',1).options([
                                 {value:1,label:'显示'},
                                 {value:0,label:'不显示'}
                               ])
                             ]
                           }
                         ]
                       }
                     ]
            }
        }
    }
</script>

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