事件监听

通过配置项on,emit可监听组件内抛出的事件, 例如监听input组件的change事件,事件名称参考Input

nativeOn,nativeEmit可监听组件的原生事件v2.5.0+

注意

通过emit方式监听事件时,事件名称中的大写会自动转换成-+小写

例如inputField组件的 change事件,事件名称为input-field-change

通过配置项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>

通过配置项emit监听事件

事件名称为${field}-${eventName}

<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>

通过配置项emitPrefix自定义事件前缀

事件名称为${emitPrefix}-${eventName}

<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>

通过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:'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>

监听组件的原生事件

监听组件的原生 click 事件

<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>