弹窗

概述

部分场景下，数据的新建、编辑需要在当前页面下进行，而不是打开新页面；这种时候，就需要在弹窗中进行。本部分将讲解如何在UX中配置弹窗。

如何创建一个弹窗

从控件栏-展示分组中拖拽一个「弹窗」控件到画布中，进入弹窗的编辑视图，可以配置弹窗基本属性和弹窗内元素。

• 弹窗预置了三部分内容：

  • 标题区域：和普通标题区域一致，可自定义展示内容，放置需要的展示信息；

    • 预置了一个关闭弹窗的按钮，和对应的关闭弹窗动作，可根据需要进行调整；

  • 内容区域：和普通的卡片一致，可根据需要自定义展示的内容；

    • 可放置表单、明细表、清单表等各种控件，从控件栏直接拖拽放入即可；

  • 按钮区域：预置了确定/取消两个按钮，每个按钮均预置了一个关闭弹窗的动作；

    • 可根据需要调整按钮样式，同时为按钮增加需要的事件和动作。

• 弹窗本身的配置包括：

  • 弹窗类型：可选择对话框形式/抽屉形式；

  • 允许点击遮罩关闭弹窗：此配置开启后，允许点击页面遮罩区域直接关闭弹窗，在某些直接查看信息的场景下会很有用。

配置完成对应信息后，就在UX中创建完一个弹窗了。

如何配置弹窗打开

弹窗的打开需要通过UX中的事件触发，比如：

• 通过按钮触发；

• 通过点击行数据触发；

• 其他。

配置时，点击需要配置打开弹窗的元素，然后在事件配置中配置对应动作为「打开弹窗」，选择目标弹窗即可。

如何配置弹窗关闭

弹窗内部本身已经预置了对应的按钮进行弹窗的关闭，如果需要再其他情况下配置关闭弹窗，可以在对应元素上配置关闭弹窗动作，选择对应弹窗即可。

如何使用弹窗进行清单数据的查看

比较常见的一个使用场景是，点击清单表中的单行数据，然后在弹窗中利用明细表/表单查看对应的数据。

为了实现这样的一个场景，可以通过以下配置进行实现：

• 单条数据源业务主键指定为点击行数据

表达式：$components.table_8jgL.clickedRow.leave_id，其中”table_8jgL”为对应表格控件编码；”leave_id”为对应业务主键的字段名。

• 在清单表中配置点击行事件：打开弹窗，同时查询数据源

• 弹窗中配置对应明细表/表单，展示单条类型数据源的数据

使用中样式：

如何使用同一个弹窗进行数据的编辑和新增

在上一段落，我们介绍了如何配置弹窗的打开和编辑，有时候，我们需要一个弹窗同时负责新建和编辑。

当需要用一个按钮弹出这个弹窗，进行新建时，如果直接打开弹窗，弹窗中可能还存在上一次打开的数据，因此在新建打开时，需要再配置一个动作「重置表单」

• 重置表单会将目前弹窗中的数据进行清空；

• 注意：需要先打开弹窗，才能进行弹窗中表单的重置操作。