腾讯云微搭低代码 触发条件及 event 对象

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

相关产品
腾讯云微搭低代码 产品页,含版本规格、价格与购买入口。

一、什么是 event 对象

在微搭中,当一个组件的触发条件被触发时则会返回该触发条件的 event 对象,触发条件不同,返回的 event 对象中存储的值也不同,我们可以通过获取 event 对象中的值来实现一些常见功能。
我们可以通过自定义 JS 方法来打印 event,查看其结构,下文为打印 event 的示例:

1. 通过左下角的代码区添加一个自定义 Javascript 方法,代码内容如下,保存后命名为 eventLog,示例如下:

export default function({event, data}) { console.dir(event);}

2. 在编辑区拖入任意一个组件,如单行输入组件,设置值改变事件,选择 Javascript 方法。

3. 然后执行下拉方法列表中选择刚刚新建的 eventLog方法。

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

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

二、单行输入

事件 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 对象结构,请参见 组件列表 中的事件部分,例如查看 开关组件 的事件介绍。

赞 (0)
上一篇 4天前
下一篇 4天前