弹窗

1. 组件概述

弹窗是一个交互反馈组件，用于在页面上弹出一个模态对话框，展示需要用户关注的内容。弹窗会覆盖在页面之上，用户必须与弹窗进行交互（确认、取消或关闭）后才能继续操作页面。弹窗通常用于信息确认、表单填写、详情展示等需要用户专注处理的场景。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 生成结果确认。用户点击”生成”按钮后，AI 工作流返回的结果在弹窗中展示，用户可以预览内容，确认无误后点击”确定”保存，或点击”取消”放弃。适合需要用户二次确认的 AI 输出场景。
• 场景二：答题提交确认。在知识问答类应用中，用户完成答题后点击”提交”，弹出确认弹窗显示”确定要提交答案吗？提交后不可修改”，防止用户误操作。可以使用”确认对话框”类型，简洁明了。

3. 功能配置

高级

基本折叠组

配置项	说明
组件名称	弹窗的自定义名称，用于在编辑器中标识该弹窗，方便管理多个弹窗时区分。
弹出方式	选择弹出内容的展示形式。可选：弹窗（居中弹出的对话框，适合需要用户专注处理的内容）、抽屉（从屏幕边缘滑出的面板，适合展示详情或较长的表单）、确认对话框（简化的确认弹窗，只有标题和确认/取消按钮，适合简单的是/否确认场景）。
标题	弹窗顶部显示的标题文字，用于说明弹窗的用途。可以设置为静态文字或绑定变量。
按钮管理	管理弹窗底部的操作按钮。默认包含”取消”和”确定”两个按钮。可以新增、删除、拖拽排序按钮，点击按钮可以进入按钮的详细配置。
展示关闭按钮	控制弹窗右上角是否显示关闭按钮（X 图标）。默认开启。关闭后用户只能通过底部按钮关闭弹窗。
点击遮罩关闭	开启后，用户点击弹窗外的半透明遮罩区域可以关闭弹窗。默认关闭，防止用户误触关闭。
可按 Esc 关闭	开启后，用户按键盘 Esc 键可以关闭弹窗。默认关闭。建议在非重要操作的弹窗中开启，提升用户体验。
隐藏按钮区	控制是否隐藏弹窗底部的按钮区域。可以设置为始终隐藏，或根据条件动态控制。适用于纯展示类弹窗，不需要用户操作按钮的场景。
左下角展示报错消息	开启后，当弹窗内的操作出现错误时，会在弹窗左下角显示错误提示信息。默认开启，建议保持开启以便用户了解操作失败的原因。
左下角展示loading动画	开启后，当弹窗内有操作正在执行时（如提交表单、调用工作流），会在弹窗左下角显示加载动画。默认开启，让用户知道系统正在处理。
是否可拖拽	开启后，用户可以通过拖拽弹窗标题栏来移动弹窗位置。默认关闭。适用于需要同时查看弹窗和页面内容的场景。
是否可全屏	开启后，弹窗标题栏会显示全屏按钮，用户可以将弹窗切换为全屏模式。默认关闭。适用于内容较多、需要更大展示空间的弹窗。
数据映射	控制传递给弹窗的数据范围。默认情况下，弹窗可以访问触发它的上下文中的所有变量。开启数据映射后，可以精确控制哪些变量传入弹窗，适用于需要隔离数据或重命名变量的场景。

设计

样式折叠组

配置项	说明
尺寸	弹窗的预设大小。可选：标准（500px 宽）、小（350px 宽）、中（800px 宽）、大（1100px 宽）、超大（90% 屏幕宽度）、自定义（手动设置宽高）。根据弹窗内容的多少选择合适的尺寸。
宽度	弹窗的宽度。选择”自定义”尺寸后可以手动设置具体数值，支持像素（px）或百分比（%）。
高度	弹窗的高度。选择”自定义”尺寸后可以手动设置具体数值。不设置时弹窗高度会根据内容自动调整。
边框	弹窗外边框的样式，包括边框粗细、颜色、线条类型等。
圆角	弹窗四个角的圆角大小，数值越大角越圆润。
阴影	弹窗的投影效果，可以增加弹窗的立体感和层次感。
背景	弹窗内容区域的背景颜色。
遮罩颜色	弹窗后面半透明遮罩层的颜色。默认为黑色半透明，可以调整透明度或更换颜色。

标题区折叠组

配置项	说明
文字	标题文字的样式，包括字体大小、颜色、粗细等。
间距	标题区域的内边距和外边距，控制标题与弹窗边缘、标题与内容区的距离。
背景	标题区域的背景颜色，可以与内容区使用不同颜色以区分。

内容区折叠组

配置项	说明
边框	内容区域的边框样式。
圆角	内容区域的圆角大小。
间距	内容区域的内边距和外边距，控制内容与弹窗边缘的距离。
背景	内容区域的背景颜色。

底部区折叠组

配置项	说明
间距	底部按钮区域的内边距和外边距，控制按钮与弹窗边缘的距离。
背景	底部按钮区域的背景颜色。

事件

事件折叠组

配置项	说明
添加事件	弹窗支持”确认”和”取消”两种触发事件。“确认”事件在用户点击确认按钮时触发，可以用于执行保存数据、调用工作流等操作；“取消”事件在用户点击取消按钮、关闭按钮或按 Esc 键关闭弹窗时触发，可以用于清理临时数据或执行其他收尾操作。