文档首页 > > 用户指南> 开发前端UI层> 开发标准页面> 主要事件说明>

事件编排器说明

事件编排器说明

分享
更新时间:2021/02/23 GMT+08:00

您可通过系统预置的事件编排器,或者直接通过定义JS代码,来实现页面组件与后台接口之间的交互。

编排事件入口

在标准页面开发界面左侧单击择组件页签,右侧区域选择“事件”,单击具体事件后面的加号或者编辑按钮,新建或者修改事件,进入事件编排器页面。

您可在事件编排器页面,通过内置动作编排事件通过自定义JS代码编排事件两种方式,编排事件逻辑。
图1 新建或编辑已有事件
图2 事件编排器

事件编排是页面的重要组成部分,用于承载页面中的逻辑,完成事件响应,以帮助用户快速高效实现页面所需要呈现的功能效果。

  • 事件行为区:集中放置事件编排过程中使用的行为节点,包括系统内置的动作(例如打开页面、弹出页面、显示或隐藏控件、定时任务、提交表单、重置表单等操作)和自定义动作(例如获取当前组件、获取页面模型等操作)。
  • 事件定义区:事件编排的操作区域,完成对事件逻辑的编排。

通过内置动作编排事件

系统预置了多种常用的事件交互动作,您可以根据需要直接使用来实现页面或组件之间的交互。

以下通过编排一个重置功能按钮为例,介绍通过内置动作编排事件,本示例主要是通过内置动作“重置表单”实现该功能,即重置表单数据。“提交表单”是指将页面数据提交到表单中,和重置表单配置类似,不再单独介绍。

  1. 选择按钮组件,在右侧“事件”页签下,单击“点击”后的加号,进入“添加动作”页面。
  2. 在左上角选择“内置动作”,单击“重置表单”,选择需要重置的表单,单击“创建”。

  3. 单击页面上方保存按钮,保存页面。
  4. 单击预览页面,在表单中输入数据,然后单击“重置”按钮,可预览按钮的事件效果。

通过自定义JS代码编排事件

您可以不使用事件编排器的内置动作,直接手动编写JS代码,实现按钮的事件逻辑。系统支持在手动编写JS代码时,进行代码联想提示;系统封装了一些常用功能的接口,并将其中典型接口做成模板,您可以从左侧拖动相关模板至右侧事件定义区域,直接使用。

  1. 选择按钮组件,在右侧“事件”页签下,单击“点击”后的加号,进入“添加动作”页面。
  2. 在左上角选择“自定义动作”,在右侧事件定义区域输入实现事件逻辑的JS代码,也可从左侧拖动相关模板至右侧事件定义区域,单击“创建”。
    图3 自定义JS代码

    代码如下:

    //获取当前组件
    var _component = context.$component.current;
    //获取当前表单
    var  _form = context.$component.form;
    // 重置表单
    _form.resetFields();

    或者单击自定义JS代码区域右上侧的,最大化自定义JS代码页面,编辑代码。

    内置的JS事件说明及使用方法,请参考自定义JS代码

  3. 单击页面上方保存按钮,保存页面。

相关说明

您可以给单个组件的事件添加多个动作,上下拖动可对动作进行排序。如下图所示,给按钮组件设置了“重置表单”和“自定义JS代码”两个动作,当预览页面后,点击该按钮时,会顺序执行“重置表单”和“自定义JS代码”两个动作定义的逻辑。

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问