zoukankan      html  css  js  c++  java
  • 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教程:自定义布局,实现一行多个组件

  • 相关阅读:
    openstack配置增加节点
    OpenStack基本应用
    OpenStack
    zabbix(客户端自动发现,自动添加)
    zabbix 邮件报警(以网易邮箱为例)
    数据库原理
    网页设计与制作
    质量管理与质量保证
    比较行政学【0717】
    企业管理学[9053]
  • 原文地址:https://www.cnblogs.com/xaboy/p/11266405.html
Copyright © 2011-2022 走看看