Event

Through the configuration items on, emit can monitor events thrown in the component, For example, listening to the change event of the input component,Event name referenceInput

native On, native Emit can monitor the native events of the componentv2.5.0+

Warn

When listening to events through the emit method, the uppercase in the event name will automatically be converted to -+lowercase

For example, the change event of the inputField component, the event name is input-field-change

Monitor events through the configuration item on

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

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field:'event',
                        title:'change',
                        on:{
                            change:()=>{
                                alert(`change!!"${this.fApi.getValue('event')}"`)
                            }
                        }
                    }
                ]
            }
            
        }
    }
</script>

Listen to events through the configuration item emit

The event name is ${field}-${event Name}

<template>
    <form-create :rule="rule" v-model="fApi" :option="options" @input-field-change="change" @input-field2-blur="blur"/>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field:'inputField',
                        title:'change',
                        emit:['change']
                    },
                    {
                        type:'input',
                        field:'inputField2',
                        title:'blur',
                        emit:['blur']
                    }
                ]
            }
            
        },
        methods:{
            change(){
                alert(`change!!"${this.fApi.getValue('inputField')}"`)
            },
            blur(){
                alert('blur!')
            }
        }
    }
</script>

Customize the event prefix through the configuration item emit Prefix

The event name is ${emit Prefix}-${event Name}

<template>
    <form-create :rule="rule" v-model="fApi" :option="options" @prefix1-change="change" @prefix2-blur="blur"/>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field:'inputField',
                        title:'change',
                        emit:['change', 'blur'],
                        emitPrefix:'prefix1'
                    },
                    {
                        type:'input',
                        field:'inputField2',
                        title:'blur',
                        emit:['blur'],
                        emitPrefix:'prefix2'
                    }
                ]
            }
            
        },
        methods:{
            change(){
                alert(`change!![${this.fApi.getValue('inputField')}]`)
            },
            blur(){
                alert('blur!')
            }
        }
    }
</script>

Listen for events through the on method

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

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field:'inputField',
                        title:'change',
                        emit:['change', 'blur'],
                        emitPrefix:'prefix1'
                    },
                    {
                        type:'input',
                        field:'inputField2',
                        title:'blur',
                        emit:['blur'],
                    }
                ]
            }
            
        },
        methods:{
            change(){
                alert(`change!![${this.fApi.getValue('inputField')}]`)
            },
            blur(){
                alert('blur!')
            }
        },
        mounted(){
            this.fApi.on('prefix1-change',this.change)
            this.fApi.on('input-field2-blur',this.blur)
        }
    }
</script>

Listen to component's native events

Listen to the component's native click event

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

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field:'inputField2',
                        title:'click',
                        nativeEmit:['click'],
                    }
                ]
            }
            
        },
        methods:{
            click(){
                alert(`click!!`)
            }
        },
        mounted(){
            this.fApi.on('native-input-field2-click',this.click)
        }
    }
</script>