提示和弹窗

提示和弹窗行为用于在用户界面上提供反馈、引导操作或展示临时内容。

显示提示

在用户界面上弹出一个轻量级的全局提示框，用于反馈操作结果，不打断用户当前操作。

常用场景

• 提交表单成功后的轻量反馈
• 复制文本成功后的提示

参数配置

运行结果与输出

无

运行机制

特殊说明

提示固定显示 3 秒，暂不支持自定义时长。建议使用简短、明确的提示文本；对于长文本或需要用户确认的信息，请改用“打开弹窗”行为。

常见错误

无

用法举例

1. 提交表单成功提示（小程序端 / Web 端）

• 需求： 用户在提交表单成功后，页面底部弹出保存成功的提示，3 秒后自动消失。

• 配置流程：

  1. 前置准备：
     • 创建“表单页面”；
     • 在页面中配置输入型组件和“提交”按钮。
  2. 选择组件：在“表单页面”画布上，选中“提交”按钮。
  3. 添加保存行为：在右侧配置面板中切换到 “行为” 标签页，在 “点击时” 事件下添加“添加数据”或“修改数据”行为，并完成数据绑定。
  4. 添加成功提示：在保存行为的 “成功时” 分支中添加 “显示提示”。
  5. 配置提示内容：在提示内容输入框中输入 保存成功。

• 运行结果： 数据保存成功后，页面显示“保存成功”的轻提示，并在 3 秒后自动消失。

打开弹窗

唤起一个模态弹窗，用户必须先处理弹窗内的内容，才能继续后续操作。可打开系统内置的弹窗，也可打开自定义弹窗。

常用场景

• 删除数据前的二次确认
• 填写复杂表单的模态框

参数配置

默认弹窗参数

自定义弹窗参数

运行结果与输出

默认弹窗：

• 结果：无
• 确认时：用户点击确认按钮后，进入确认时分支。

自定义弹窗：

• 弹窗关闭时：自定义弹窗关闭后进入该分支。后续行为可通过 弹窗 -> 弹窗输出 获取自定义弹窗配置的输出。

运行机制

打开一个弹窗时，其加载过程和页面加载过程类似：

1. 弹窗组件挂载完成，即弹窗真实的 DOM 插入到页面中。
2. 触发“弹窗加载时”触发器，并将触发器下配置的行为推入运行时引擎的执行队列执行。
3. 弹窗及其内部组件的数据源开始独立发起请求。

2 和 3 两条路径并行运行互不等待，因此在“弹窗加载时”触发器内的行为，无法引用弹窗内的任何数据源，也无法引用弹窗外的任何数据源。

特殊说明

所有弹窗均没有 Z-index 层级的配置，它们统一用打开的先后顺序决定层级：越晚打开的弹窗，层级越高。

常见错误

无

用法举例

1. 删除数据前的二次确认（小程序端 / Web 端）

• 需求： 用户点击删除按钮时，弹出系统确认框询问确定要删除吗，点击确认后执行删除操作。

• 配置流程：

  1. 前置准备：
     • 创建 “列表页面”；
     • 在 “列表页面” 中配置好一个按钮。
  2. 选择组件：在 “列表页面” 画布上，选中 “按钮”。
  3. 添加行为：在右侧配置面板中切换到 “行为” 标签页，直接在 “点击时” 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 “打开弹窗”。
  5. 绑定参数传递：
     • 方式选择打开默认弹窗。
     • 在标题输入框中输入 删除数据确认。
     • 在内容输入框中输入 确定要删除吗？。
     • 在确认按钮文案输入框中输入 确定。
     • 在取消按钮文案输入框中输入 取消。
     • 在当前行为卡片下方的 “确认时” 分支中，点击 “添加操作” 按钮，搜索并添加删除数据的行为。

• 运行结果： 用户点击按钮后，屏幕中央弹出系统确认框。点击确认后，执行“确认时”分支中的删除数据行为。

2. 读取自定义弹窗的输出结果（小程序端 / Web 端）

• 需求： 用户在弹窗中输入自定义数据（如备注），点击确认后，主页面可获取弹窗内输入的结果进行后续处理。

• 配置流程：

  1. 前置准备：
     • 创建 “主页面” 和 “备注输入弹窗”；
     • 在 “备注输入弹窗” 中放置一个输入框组件和一个确认按钮，并配置一个输出，名为 备注，类型为文本。将其值绑定到输入框组件的组件输出。
  2. 在主页面配置按钮：在 “主页面” 画布上添加按钮，设置 “点击时” 事件，操作类型为 “打开弹窗”，方式为打开自定义弹窗，弹窗选择 “备注输入弹窗”。
  3. 配置弹窗行为：在 “备注输入弹窗” 的确认按钮点击事件下，操作类型选择 “关闭弹窗”，关闭范围选择关闭最上层。
  4. 在主页面处理弹窗输出：在 “打开弹窗” 操作的 “弹窗关闭时” 分支里添加操作，此操作可获取弹窗输出的数据（如输入框内容），可用于展示、提交或其它逻辑处理。

• 运行结果： 用户点击主页面按钮弹出自定义弹窗，在弹窗中输入内容并点击确认，弹窗关闭并将输入的内容返回到主页面，后续操作可以直接使用 “弹窗输出” 中的数据。

关闭弹窗

关闭当前打开的自定义模态弹窗。

常用场景

• 自定义弹窗内的取消按钮
• 表单提交成功后自动关闭弹窗

参数配置

运行结果与输出

无

运行机制

1. 根据组件 id 找到弹窗组件，开始卸载。“弹窗卸载时”触发器会被立刻触发，其下配置的行为被推入运行时引擎的执行队列执行。
2. UI 层级上，弹窗开始执行持续 200 毫秒的淡出动画。
3. 淡出动画结束后，弹窗组件从 DOM 中移除。
4. 行为不受 UI 影响，即使组件已被移除，行为也会继续执行，直到所有行为执行完毕。

特殊说明

• 如果关闭弹窗时，并没有打开任何弹窗，不会报错，后续行为也会继续执行。

用法举例

1. 提交表单后关闭弹窗（小程序端 / Web 端）

• 需求： 用户在自定义弹窗内填写完表单并点击提交，数据保存成功后自动关闭该弹窗。

• 配置流程：

  1. 前置准备：
     • 创建 “主页面” 与 “表单弹窗”；
     • 在 “表单弹窗” 中配置好一个按钮。
  2. 选择组件：在 “表单弹窗” 画布上，选中 “按钮”。
  3. 添加保存行为：在右侧配置面板中切换到 “行为” 标签页，在 “点击时” 事件下添加数据保存行为并完成数据绑定。
  4. 添加关闭弹窗行为：在保存行为的 “成功时” 分支中添加 “关闭弹窗”。
  5. 配置关闭范围：选择“关闭最上层”。

• 运行结果： 数据保存成功后，表单弹窗关闭并返回主页面；保存失败时弹窗保持打开，便于用户修改后重试。

设置变量

为便于快速定位「设置变量」操作，该行为在菜单的多个位置均有展示，但实为同一项功能。详细介绍请参见：设置变量

刷新数据源

为便于快速定位「刷新数据源」操作，该行为在菜单的多个位置均有展示，但实为同一项功能。详细介绍请参见：刷新数据源

控制定时任务

为便于快速定位「控制定时任务」操作，该行为在菜单的多个位置均有展示，但实为同一项功能。详细介绍请参见：控制定时任务