添加自定义事件

自定义事件是由平台提供的一种交互方式，可以由用户选择需要触发的事件、定义触发的条件以及触发后的结果对哪些组件产生影响（如显隐切换、缩放、动态修改配置）。默认的自定义事件只有初始化完成和数据改变时触发这个动作，对于不同的需求场景，平台支持组件开发者对其进行触发事件的扩展。

本教程将说明如何添加一个最常用的事件——点击，下面只展示必要的步骤，我们假定你已经阅读过快速入门或已经了解组件开发流程。

1. 添加新事件

为了给使平台知道组件有哪些自定义的事件，我们需要修改config/main.json文件，triggers定义了组件的事件列表，name为展示给用户的事件名称，value可以理解为事件的id

{
  ...
  "triggers": [
    {
      "name": "鼠标点击",
      "value": "click"
    }
  ]
}

注意:

目前自定义事件在开发环境中还不能预览，如果要查看效果需要发布后在平台中才能看到

我们可以在任何时机触发任何事件，只需要调用emit接口通知平台，并传递合适的数据出去。这里我们把触发时机放在组件的点击事件中，即当组件A被点击时，就会告诉平台组件A触发了点击事件，组件数据对象为data，然后平台会根据用户设置的参数产生结果，组件不需要关心后续逻辑。

const { emit } = props;
const onClick = () => emit('click', data)	// data是组件数据对象

return (
  <div ... onClick={onClick}>
  	点我触发自定义点击事件
  </div>
);

需要说明的是，当用户没有添加任何条件时，默认是true，总是会触发相应动作。当用户选择的条件为字段判断时，平台会取组件数据列表（组件数据必须是一个列表）里首个对象中的字段判断list[0]，判断时会自动转换类型，如1 = '1'

为了测试该功能，需要先发布组件。

接着进入平台添加该组件（下文为组件A），在交互面板的自定义事件中为组件A添加点击事件，控制对象为我们添加的另一个标题组件（组件B），我们的计划是当点击组件A的时候，组件B会被隐藏，就是这么简单！

此处为语雀视频卡片，点击链接查看：Kapture 2020-10-26 at 18.10.01.mp4

最后我们来检查一下效果，点击右上角的预览按钮查看效果

如遇其他使用问题，可扫描下方二维码，获取更多产品支持~