EventSetter

简介

可以将事件绑定在物料上

展示

EventSetter - 图1

组件自带事件列表

在物料协议的configure.supports.events 中声明

  1. {
  2.     "configure ": {
  3.         "supports": {
  4.             "style": true,
  5.             "events": [{
  6.                 "name": "onChange",
  7.             }, {
  8.                 "name": "onExpand"
  9.             }, {
  10.                 "name": "onVisibleChange"
  11.             }]
  12.         }
  13.     }
  14. }

事件绑定

EventSetter - 图2

可以选择已有的事件(schema中的methods节点)进行绑定，也可以选择新建事件，选择新建事件默认会增加_new的事件后缀命名，点确定以后会跳转到对应代码插件对应区块

参数设置

如果需要额外传参，需要将扩展参数设置打开，在代码面板中，编辑参数内容

注意：

  • 额外参数必须被包装成一个对象，如参数模板中所示
  • 可以使用动态变量例如 (this.items，this.state.xxx)
  1. {
  2.    "testKey":this.state.text
  3. }
  • 该参数是额外参数，会加在原有参数后面，例如在onClick中加入扩展传参，最终函数消费的时候应该如下所示
  1. // e为onClick原有函数传参，extParams为自定义传参
  2. onClick(e, extParams) {
  3.     this.setState({
  4.       isShowDialog: extParams.isShowDialog
  5.     })
  6. }

事件新建函数模板

有时候我们创建的函数会有用到一些通用的函数模板，我们可以在物料协议的events.template中创建一个模板，如下

  1. {
  2.     "configure ": {
  3.         "supports": {
  4.             "style": true,
  5.             "events": [{
  6.                 "name": "onChange",
  7.                 "template": "templeteTest(e,${extParams}){this.setState({isShowDialog: false})}"
  8.             }, {
  9.                 "name": "onExpand"
  10.             }, {
  11.                 "name": "onVisibleChange"
  12.             }]
  13.         }
  14.     }
  15. }

其中 ${extParams} 为扩展参数占位符，如果用户没有声明扩展参数，会移除对应的参数声明，定义模板后，每次创建完函数会自动生成模板函数，如下图

EventSetter - 图3