覆盖主要内容
版本: 6.1.0

如何动态控制组件样式

本文档以Tab列表动态控制通用标题组件样式更新为例，为您介绍蓝图编辑器动态控制组件样式的方法。

前提条件​

准备好您的交互需求。 本案例的交互需求为：使用Tab列表动态控制通用标题文本的颜色。

背景信息​

本案例的场景为：通用标题在项目中经常使用动态数据源，用户需求为根据数据源返回值的不同，使用不同的颜色展示该文本。 本案例实现的功能：使用Tab列表组件模拟实际场景的动态数据源（如API、数据库等），根据通用标题接收到的value值不同，切换展示不同的数据样式。

理解案例交互​

当前案例实现需要用户将交互转成节点和边的关联关系，需要使用的组件有满足需求的事件和动作才能进行配置，否则就无法实现。

  • 组件：组件包含两种能力，事件抛出能力和动作执行能力。本案例使用了通用标题组件之间的联动。
    • Tab列表：具备抛出请求接口返回数据的能力。
    • 通用标题：属于被联动组件，具有接收数据并执行动作的能力。
  • 蓝图编辑器：通过运用逻辑节点编排的方式，将上游组件的交互/事件与下游组件的执行动作绑定，从而实现页面内组件间的交互联动。
信息

说明 蓝图编辑器配置完成后需要在预览页查看配置效果。

配置案例交互​

  1. 参考画布编辑器 添加组件，在画布编辑器页面搭建所需要的Tab列表和通用标题组件。

  1. 修改通用标题的配置面板中的标题配置项。

  1. 勾选通用标题数据面板中的受控模式。

  1. 样式配置完成后，单击画布编辑器图层栏内通用标题和Tab列表组件，右键选择导出到蓝图编辑器。

  1. 在画布编辑器页面左上角，单击蓝图编辑器图标，切换到蓝图编辑器配置页面。**
  2. 在蓝图编辑器配置页面，将左侧导入节点栏内的Tab列表和通用标题节点拖至画布中，并按照如下图所示的样式进行连线。

您需要进行两次连线，如上图所示。

  • 将Tab列表的当Tab点击时事件与通用标题的导入数据接口动作连线。
  • 将通用标题的当数据接口请求完成时事件与通用标题的更新组件配置动作连线。
  1. 连线完成后会自动添加两个串行数据处理逻辑节点到连线中，分别将两个串行数据处理节点配置面板中的处理方法重命名为更新通用标题文本和配置标题颜色，如上图所示。具体操作方法请参见: 串行数据处理节点。
  2. 配置画布中更新通用标题文本处理方法。
    1. 单击与Tab列表关联的串行数据处理逻辑节点，进入右侧配置面板，选择面板内其他配置栏下方的更新通用标题文本处理方法，单击右侧箭头打开脚本编辑区域。
    2. 在脚本编辑区域，输入代码。当前处理方法的示例代码如下，用于模拟动态数据更新通用标题的文本。
return [{
    value: data.id == 1 ? "标题一" : "标题二"
}];
  1. 配置画布中配置文本颜色处理方法。
    • 单击蓝图编辑器左上角的画布编辑器图标（ ），切换返回画布编辑器页面。单击通用标题组件，在右侧的配置面板中，单击下方的复制配置到剪贴板。
    • 将复制的内容粘贴到任意的代码编辑器中，观察数据层级关系，并找到您需要更新的组件配置字段。

  • 根据上图的数据结构，编写要传入通用标题的样式配置脚本。
return data[0].value == "标题一" ? {
  "color":"#18F8B8"
} : {
  "color":"#FFB6C1"
  }
  • 切换回蓝图编辑器界面，单击另一个串行数据处理逻辑节点，进入右侧配置面板，选择面板内其他配置栏下方的配置文本颜色处理方法，单击右侧箭头打开脚本编辑区域。
  • 在脚本编辑区域，输入代码。当前处理方法的示例代码如下，用于在数据接口请求完成时根据标题文本配置字体颜色样式。
return data[0].value == "标题一" ? {
  "color":"#18F8B8"
} : {
  "color":"#FFB6C1"
  }

  1. 当前两个处理方法都配置完成后，单击蓝图编辑器配置页面右上角的预览图标，查看Tab列表动态控制通用标题组件样式的交互效果。

最后一次更新 更新于