设置组件属性和事件

创建页面并添加组件后，你可以进一步设置这些组件的属性和事件，以实现所需的功能和交互效果。你可以调整组件的外观，例如修改颜色、字体和大小，同时设置交互事件，例如 onclick、onload 等，以响应用户的操作，不仅增强了页面的可用性，还提升了用户体验，使低代码应用更加生动。

属性效果

常见属性的配置效果如下所示，具体的属性说明请参考属性配置。

组件位置

你可以在位置属性中，选择相对定位、绝对定位或固定定位，调整组件的位置。例如对容器组件内的按钮组件设置不同的定位方式，对应的属性配置说明及位置效果展示如下所示。

组件尺寸

你可以在画布中选中目标组件，拖拽组件的四个角调整组件大小，也可以在尺寸属性中设置组件的宽度、高度，精准调整组件的尺寸。例如针对容器组件内的按钮组件，你可以选择不同的尺寸设置方式，调整其尺寸，对应的属性配置说明及效果展示如下所示。

组件布局

页面或布局类组件（容器、列表）支持布局配置，可一键排列组件内的元素。例如针对容器组件内的 4 个图标组件，轻松实现纵向、横向或自动换行等排列方式，对应的属性配置说明及排列效果展示如下所示。

背景颜色

你可以在填充属性中，通过颜色库或自定义颜色，为组件设置背景颜色。例如将容器组件的背景色设置为黄色，对应的属性配置说明及填充效果展示如下所示。

背景图片

你可以在填充属性中，上传图片，为组件设置背景图片。例如将容器组件的背景色设置为图片，对应的属性配置说明及填充效果展示如下所示。

组件边框

你可以在边框样式属性中，设置组件的边框样式。例如为文本框添加边框，对应的属性配置说明及边框效果展示如下所示。

组件阴影

你可以在阴影样式属性中，设置组件的阴影样式。例如为文本框添加阴影，对应的属性配置说明及阴影效果展示如下所示。

模糊效果

你可以在模糊属性中，设置组件的模糊效果。网页端组件支持图层模糊和背景模糊，移动端组件仅支持图层模糊。

• 图层模糊：当前图层内包含的所有元素都将被模糊处理。例如选中一个图片组件，设置图层模糊，那么整张图片都将被模糊处理。

• 背景模糊：支持模糊处理当前组件底部所覆盖部分。例如一个图标组件叠放在一个图片组件上，为图标组件设置背景模糊后，图标组件与图片组件重叠部分将被模糊处理。

溢出效果

你可以在溢出属性中，为组件设置不同的溢出效果。例如通过为容器组件设置不同的溢出配置，当容器内的 Markdown 组件超出容器边界时，系统将进行不同的处理，对应的属性配置说明及效果展示如下所示。

变换设置

你在可以在变换区域，为组件添加缩放、旋转、位移、倾斜等属性配置。例如将图片组件缩放 50%、旋转 30度；将图片组件沿 X、Y 轴各倾斜 10 度，对应的属性配置说明及效果展示如下所示。

选中效果

列表组件中的列表项支持设置选中效果，即你可以在画布中选中列表组件的列表项（Listltem），为其设置选中效果。设置完成后，当你单击其中一个列表项时，将显示相应的变化效果，对应的属性配置说明及效果展示如下所示。

悬浮效果

你可以为组件配置鼠标悬浮时的交互效果。例如添加一个按钮组件，为其设置悬浮效果。当你将鼠标悬浮在按钮上时，边框变为蓝色，提供直观的交互效果，对应的属性配置说明及效果展示如下所示。

指针设置

配置鼠标在指定组件区域内的指针样式。例如为文本组件设置自定义的指针样式，当鼠标悬停在文本组件内时，指针变为指定的样式，对应的属性配置说明及效果展示如下所示。

隐藏组件

你可以通过组件的可见性属性，控制组件的隐藏或显示。例如添加开关组件和文本输入组件，并通过开关控制文本输入组件的可见性。开关组件 ID 为 Switch 1，你可以通过如下方式进行配置。

• 常用条件方式
  设置条件为Switch1.value= Ture时，隐藏文本输入组件（Textarea2）。当打开开关时，{{ Switch1.value}}值为 true，文本输入组件将被隐藏；当关闭开关时，{{ Switch1.value}}值为 false，展示文本输入组件。

• 表达式方式
  将文本输入组件的可见性设置为{{ Switch1.value}}。当打开开关时，{{ Switch1.value}}值为 true，文本输入组件将被隐藏；当关闭开关时，{{ Switch1.value}}值为 false，展示文本输入组件。

属性配置

不同的组件有不同的属性配置参数，但通常包含常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

常用设置

各个组件的属性设置中，常用设置相关的属性各不相同。以文本组件为例，常用设置相关的属性说明如下。

位置设置

确定组件在页面或容器中的具体位置的参数。

布局设置

页面或布局类组件（容器、列表）支持布局配置。以容器组件为例，布局设置相关的属性说明如下。

尺寸设置

控制组件大小的参数。以文本组件为例，尺寸设置相关的属性说明如下。

样式设置

控制组件视觉表现的参数，例如颜色、字体和边框等。

变换设置

丰富界面视觉效果的参数。

指针设置

配置鼠标在指定组件区域内的指针样式。
你可以选择根据元素类型自动显示，由系统自动判断并显示相应的指针样式，也可以在使用自定义样式区域，选择固定的指针样式。

状态设置

控制组件加载态、悬浮态、点击态、选中态、出现态的视觉效果参数。不同组件支持的状态设置不同，此处以列表组件为例。

可见性设置

控制组件隐藏或显示的参数，支持在特定条件下隐藏组件。支持通过设置条件或表达式进行配置。

• 表达式方式
  • 设置为 false：显示组件。
  • 设置为 true：隐藏组件。
  • 设置为变量：通过变量值（true 或 false）动态控制组件的可见性。
    例如可以通过开关组件控制文本组件的可见性。开关组件 ID 为 Switch 1，当你将文本组件的可见性设置为{{ Switch1.value}}后，开关打开时，{{ Switch1.value}}值为 true，文本组件将被隐藏。
• 常用条件方式
  支持通过可视化界面设置条件，以控制组件的可见性。
  

事件配置

用户界面编辑器支持为组件配置事件，通过配置交互事件，用户界面可以实现多样化的交互效果。配置事件时，你需要选择事件类型并指定执行动作。

事件类型

事件类型定义了在何种用户操作或系统状态下会触发特定的响应，用户界面编辑器支持以下事件类型：

• 加载时：当组件完全加载到页面时触发。
• 点击时：当用户点击组件时触发。
• 双击时：当用户双击组件时触发。
• 鼠标移动时：当鼠标在组件上移动时触发。
• 鼠标悬停时：当鼠标悬停在组件上时触发。
• 鼠标移出时：当鼠标从组件上移出时触发。
• 鼠标进入时：当鼠标进入组件时触发。
• 鼠标离开时：当鼠标离开组件时触发。
• 鼠标按下时：当用户在组件上按下鼠标按键时触发。
• 鼠标释放时：当用户在组件上释放鼠标按键时触发。
• 点击单元格时：当用户点击列表单元格时触发。
• 提交时：当表单提交时触发。
• 提交失败时：当表单提交失败时触发。
• 数据改变时：当输入字段的内容改变时触发。
• 鼠标失焦时：当元素失去焦点时触发。
• 鼠标聚焦时：当元素获得焦点时触发。

执行工作

当某个预定义的事件被触发时，会执行一个预设的动作，这个动作是你希望在事件发生时执行的具体任务，用户界面编辑器支持以下执行动作：

• 调用工作流：为组件绑定工作流，当执行预定动作时，系统会自动调用绑定的工作流，执行相应的业务逻辑。

  说明

  支持绑定低代码应用内的工作流或资源库中的工作流，资源库中的工作流必须为已发布状态，而低代码应用内的工作流无此限制。

• 页面跳转：组件能够控制页面间的导航，实现从一个页面跳转到另一个页面。
• 展示提示信息：用于在用户执行特定操作时显示信息提示，例如警告、成功、失败、说明。
• 控制组件：当执行动作为控制组件时，通常会调用一个或多个组件方法来完成所需的功能。组件方法是组件提供的具体功能实现，它们是内置的。
• 界面变量赋值：为界面变量设置静态值或动态值。具体操作，请参考为变量赋值。

组件方法

用户界面编辑器的组件支持以下方法，不同组件支持的方法不同，以实际界面为准。

• 失焦：使组件失去焦点，通常用于文本输入类组件。
• 聚焦：将焦点设置到指定的组件，使其成为活动状态。
• 清除：清除组件的内容，例如文本输入框中的文字。
• 清除验证：移除组件上的所有验证错误信息。
• 验证：检查组件的当前值是否符合预设的验证规则。
• 重置：将组件恢复到初始状态。
• 滚动到视图：将组件滚动到可视区域内。
  仅网页端组件支持，小程序端组件不支持。
• 设置数据：为组件设置或更新数据。
• 设置禁用：使组件变为禁用状态，用户无法与之交互。
• 设置隐藏：隐藏组件，使其不可见。
• 复制到剪切板：复制文本内容到剪切板。
• 将容器内容保存为图片：将容器组件中的内容保存为图片。
• 下载到本地：支持下载图片、音频到本地。
  在网页端应用中，下载后的文件名格式为 image+时间戳、audio+时间戳。

操作步骤

参考以下操作，配置交互事件：

1. 在用户界面页签下，单击画布中要设置事件的组件。

2. 在右侧属性面板，单击事件页签。

3. 单击 + 新建。

4. 在弹窗中，配置事件类型和执行动作。

   1. 事件类型：选择在何种用户操作和系统状态下触发执行动作。
   2. 执行动作：当满足触发条件后，指定要执行的动作。

      执行动作	说明
      调用工作流	执行动作选择调用工作流，操作步骤如下： 选择要调用的工作流。 将鼠标悬浮至 content 参数的文本框上，然后单击右侧的图标。 在展开的配置面板中，找到组件目录，单击目标组件的 value，将组件中内容输入到 content 参数中。 配置工作流调用失败时的提示文案。
      页面跳转	执行动作选择页面跳转，操作步骤如下： 选择页面类型： 当前项目页面：选择当前项目中的页面名称，当满足触发条件时，会打开当前项目中的页面。支持配置页面入参。 URL：输入要打开的页面的 URL。
      展示提示信息	执行动作选择展示提示信息，操作步骤如下： 选择提示框类型，支持成功、警告、失败、说明。 输入提示内容。 设置提示内容的展示时间，支持自动消失和常驻。选择自动消失时，配置多长时间后取消提示框，单位 ms。
      控制组件	执行动作选择控制组件，操作步骤如下： 选择要控制的组件。 选择控制组件的方法，不同组件内置的方法不同。
      界面变量赋值	执行动作选择界面变量赋值，操作步骤如下： 选择你已创建的界面变量。 设置变量值，支持设置静态值或动态值。具体操作，请参考为变量赋值。

5. 单击确认，完成事件配置。

配置示例

复制文本内容

在文本生成类应用中，使用者生成内容后，通常希望一键单击按钮即可快速将内容复制到剪切板，无需手动选择文本并执行复制操作。基于此需求，扣子编程提供了组件方法复制到剪切板，支持通过为组件添加事件的方式，实现一键将文本内容复制到剪切板。
例如在网页类型的应用搭建过程中，你可以通过添加一个名为复制文本的按钮组件，并为该组件绑定事件，实现文本一键复制功能。事件配置的重要参数说明如下：

• 执行动作：选择控制组件。
• 选择组件：待复制的文本内容所在的组件，例如Markdown1。
• 组件方法：选择复制到剪切板。

在预览页面生成文本后，单击复制文本，页面将提示复制成功，随后即可在剪切板中粘贴文本内容。

下载图片到本地

在图像类应用中，使用者输入文本生成对应的图片后，通常希望一键单击按钮即可快速将图片下载到本地，以便后续使用或分享。基于此需求，扣子编程提供了组件方法下载到本地，支持通过为组件添加事件的方式，实现图片一键下载功能。
例如在文生图应用搭建过程中，你可以通过添加一个名为下载图片的按钮组件，并为该组件绑定事件，实现图片一键下载功能。事件配置的重要参数说明如下：

• 执行动作：选择控制组件。
• 选择组件：待复制的文本内容所在的组件，例如Image1。
• 组件方法：选择下载到本地。

在预览页面生成图片后，单击下载图片，页面将提示下载成功，随后你可以在本地打开图片。