组件事件配置

组件事件配置用于监听和处理组件交互过程中的各类事件，以实现更灵活的联动逻辑和业务行为。

典型场景

动态表单验证

• 场景：用户输入手机号时，实时校验格式并提示错误。
• 实现：为输入框绑定 onChange 事件，触发正则校验逻辑，动态更新错误提示。若需要在事件里继续调用校验、取值或设置字段状态，可以结合表单 API中的 validateField、getValue、setValue 等方法使用。

级联选择器

• 场景：选择省份后，自动加载对应的城市列表。
• 实现：为省份下拉框绑定 onChange 事件，触发接口请求获取城市数据，并更新城市下拉框的选项。若需要读取表单 API、当前组件规则或原始事件参数，结合$inject会更方便。

实时数据同步

• 场景：用户修改表单数据时，实时保存到本地或同步到服务器。
• 实现：为表单绑定 onBlur 或 onChange 事件，触发数据保存逻辑。若需要把组件内部事件继续抛给业务页面统一处理，可以参考渲染时监听事件中的事件抛出与监听方式。

设置入口

点击「设置事件」

设置事件弹窗，点击创建事件，选择当前组件支持的事件

设置事件说明

事件流

选择配置动作，即可设置执行动作的相关操作

条件判断中分为逻辑条件和计算公式

逻辑条件通过定义条件，组件的状态和数据值会根据条件是否成立自动调整。

计算公式通过公式和表单数据，动态计算组件的状态和数据值。

自定义

1. 当前编辑中的事件
2. 删除已添加的事件
3. 事件函数的内容编辑区域
4. inject 参数说明，可结合$inject查看完整数据结构与常用 API
5. 保存按钮，修改函数内容后需要点击按钮，保存修改后的内容

全局数据

1. 从全局数据源中选择自定义的事件函数，支持扩展
2. 管理按钮，快捷打开全局事件管理界面
3. 保存按钮，修改数据源后需要点击按钮，保存修改后的内容

动作配置

动作管理功能提供了便捷的操作方式，使用户可以通过指定事件触发一系列动作，具体包括以下操作：

可视化操作设置 通过直观的可视化界面，用户可以为各个组件设置在特定事件下触发的一系列动作。

内置常用动作 系统内置了多种常用动作，已经能够覆盖页面跳转、弹窗控制、表单操作、请求处理和业务事件抛出等大部分场景。实际配置时，通常先确定“事件发生后要做什么”，再从对应分类中选择动作；如果你需要逐项查看更完整的动作配置结构，也可以继续阅读内置动作列表。

页面操作动作

动作名称	用途说明
redirectPage	页面跳转
reloadPage	页面刷新

模型操作动作

动作名称	用途说明
openModel	打开弹窗
closeModel	关闭弹窗
message	显示消息提示
confirm	显示确认对话框

表单操作动作

动作名称	用途说明
hidden	隐藏或显示字段
disabled	禁用或启用字段
resetFields	重置表单
clearFields	清空表单
validate	验证整个表单
validateFields	验证指定字段
submit	提交表单
setValue	设置字段值

其他动作

动作名称	用途说明
fetch	发送请求
print	打印表单
exportPdf	导出 PDF
emitEvent	抛出业务事件
copy	复制文本
callback	执行自定义回调

动作使用提示

• 动作执行条件：支持为每个动作设置执行条件，只有在条件满足时动作才会执行。
• 阻断条件：支持为动作设置阻断条件，如果阻断条件成立，则中断执行，这使得动作的执行流程更加可控。
• 流程控制：通过条件设置和阻断机制，用户可以高度定制动作的执行流程，实现复杂的业务逻辑控制。
• 支持扩展：用户可以根据需求扩展自定义动作，满足更复杂和特定的业务需求。若需要继续查看内置动作能力、注册方式和扩展示例，可直接阅读内置动作列表与扩展动作操作。

inject 参数说明

在自定义事件或全局事件的函数编辑区中，通常可以通过 inject 获取设计器提供的上下文能力，例如表单 API、原始参数、当前事件信息等。它适合用于读取表单数据、操作字段状态、调用模块或执行自定义处理逻辑；如果你需要了解完整字段结构、api、self、args 等属性含义，可以继续查看$inject。

开发示例

下面这段示例可以直接放到 JS 面板中，用于在组件值变化后同步更新其他字段；如果你还需要把这个变化继续抛到业务页面中处理，可以自然配合渲染时监听事件一起使用。

const api = $inject.api;
const value = $inject.args[0];

if (!value) {
    api.setValue('remark', '');
} else {
    api.setValue('remark', `已选择：${value}`);
}

这个示例适合用在选择器、单选框或输入框的 change 类事件中。实际接入时，只需要把 remark 替换成目标字段的标识即可；若要进一步执行打开模块、提交表单或条件流程控制，可继续结合本页上方的动作配置使用。