Custom form components

Components that implement v-model can be called form components

Example

Customize the counter button component to get the number of button clicks. The function of this component is the same as the built-in component

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

<script>
    formCreate.component('inputBtn', {
        data: function () {
            return {
                num: this.value,
            }
        },
        render($h){
            return $h('ElButton',{
                props:{
                    disabled: this.disabled,
                    long: true  
                },
                on:{
                    click:()=>{
                        this.onClick()    
                    }    
                }    
            },['compute'+this.num])
        },
        props:{
            //Predefined
            disabled:Boolean,
            value:Number,
        },
        watch:{
            value(n){
                //Synchronize value
                this.num = n
            }
        },
        methods: {
            onClick: function () {
                this.num++
                //Update the value inside the component
                this.$emit('input',this.num)
            },
        },
    })

    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    },
                    resetBtn:true
                },
                rule:[
                    {
                        type:'inputBtn',
                        field:'btn',
                        title:'title',
                        value:10
                    }
                ]
            }
        }
    }
</script>

Predefined

Define the following properties and events to achieve the same effect as the built-in components. Give it a try.

props

Receive some properties through props inside the custom component

• value Component value
• disabled Disabled state of the component

例如:

vm = Vue({
  props:{
   value:String,
   disabled:Boolean      
  }
})

Input event

Update the internal value of the component through the input event

When the component value changes, update the value through the input event. For example:

vm.$emit('input',newValue)

Mount custom components

The custom component to be generated must be mounted globally via the vue.component method, or mounted via the form Create.component method

for example:

formCreate.component('TestComponent',component)

Generate

The form component must define the field attribute

JSON

{
    type:'TestComponent',
    value:'test',
    field:'testField',
    title:'title'
}

Maker

formCreate.maker.create('TestComponent','testField','title').value('test')

Now this custom component can be operated like the built-in component