触发条件及 event 对象

最近更新时间:2024-02-02 10:00:52

我的收藏
一个组件的事件由触发条件以及执行动作两部分构成,执行动作又分为 平台方法 和自定义方法,本文章主要对触发条件及对应 event 对象进行介绍说明。

什么是 event 对象

在微搭中,当一个组件的触发条件被触发时则会返回该触发条件的 event 对象,触发条件不同,返回的 event 对象中存储的值也不同,我们可以通过获取 event 对象中的值来实现一些常见功能。 我们可以通过自定义 JS 方法来打印 event,查看其结构,下文为打印 event 的示例:
1. 通过左下角的代码区添加一个自定义 Javascript 方法,代码内容如下,保存后命名为 eventLog,示例如下:
export default function({event, data}) {
console.dir(event);
}
2. 在编辑区拖入任意一个组件,如单行输入组件,然后在按钮绑定一个点击事件,事件动作选择 Javascript 代码方法节点,然后下拉方法列表中选择刚刚新建的 getEventObject方法。



3. 在输入框中进行输入改变的操作,查看下方开发调试工具(面板 > 开发调试工具)控制台中的查看打印信息。



4. 根据上图所示,我们便可以在编辑器中通过使用 event.detail.value 来调用当前触发条件所返回的值。

不同组件的事件触发时返回的 event 对象

单行输入

事件
event.detail
change(输入改变)
{ value: string }, value 为输入的新值
focus(聚焦)
{ value: string },value 为当前输入框的值
blur(失焦)
{ value: string },value 为当前输入框的值
confirm(确认)
{ value: string },value 为当前输入框的值
clear(清除内容)
{ originValue: string },originValue 为清除前输入框的值

多选

事件
event.detail
change(选中状态改变)
{ value: string[] },value 为当前选中状态的值的集合

单选

事件
event.detail
change(选中状态改变)
{ value: boolean },value 为当前选中状态

下拉选择

事件
event.detail
change(值改变)
{ value: string },value 为当前选中的值

更多组件

其余更多组件对应的触发条件以及返回的 event 对象结构,请参见 组件列表 中的事件部分,例如查看 开关组件 的事件介绍。