form-create教程:给内置组件和自定义组件添加事件

本文将介绍form-create如何给内置组件和自定义组件添加事件

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

如果对您有帮助，您可以在 GitHub 上给作者点个"Star" 支持一下 谢谢！

 

例如给i-input组件添加on-change事件

{
    type:'input',
    field: 'test',
    title: 'test',
    value: '',
    on: {
        'on-change': function(){
            console.log('value 发生变化');
        }
    }
}

 

通过 emit 方式绑定事件

只支持在组件模式下

//rule
[{
     type:'input',
     field: 'test',
     title: 'test',
     value: '',
     emit: ['on-change']
 }]

 

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

<form-create :rule="rule" test-on-change="onChange"> </form-create>

通过 emitPrefix 自定义事件前缀

//rule
[{
     type:'input',
     field: 'test',
     title: 'test',
     value: '',
     emit: ['on-change'],
     emitPrefix: 'xaboy',
 }]

 

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

<form-create :rule="rule" xaboy-on-change="onChange"> </form-create>

 

向事件中注入$f和自定义参数

//rule
[{
     type:'input',
     field: 'test',
     title: 'test',
     value: '',
     emit: [{
        name: 'on-change',
        inject: ['自定义参数,数据类型不限']
     }],
     emitPrefix: 'xaboy',
 }]

 

<form-create :rule="rule" xaboy-on-change="onChange"> </form-create>

 

向事件中注入参数后,事件会额外增加一个参数

//未注入
{
    onChange: function(val){

    }
}
//注入后
{
    onChange: function(inject, val){

    }
}

 

inject 参数的数据结构

{
    $f:Object,//api
    rule:Array,//生成规则
    option:Object,//全局配置
    inject:Any,//自定义注入的参数
}

 

参数注入也可以通过全局配置项injectEvent:true开启

 

form-create教程系列:

form-create教程:移除默认提交按钮

form-create教程:给内置组件和自定义组件添加事件

form-create教程:自定义布局,实现一行多个组件