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教程:自定義布局,實現一行多個組件