组件容器
组件容器功能背景介绍
在项目建设的过程中，经常有多模块重复组件、自定义拼接组件、组合展示需求。此类场景会带来极大的数据接入及后期的维护成本，且无法满足用户的专属定制需求。为助力用户更加高效、灵活地搭建可视化项目，EasyV全新上线组件容器功能！（实操demo可在文末下载）
- 用户通过拖拉拽，即可完成自定义组件的拼接。
- 通过数据驱动，按照设定的自动布局，可批量渲染生成相同实例模块。满足多模块重复组件、组合展示需求。同时，统一接入数据源，完成数据分发，无需对每个组件进行逐个数据源接入，大大降低数据接入及后期的维护成本。
- 组件容器内的任意实例都可与内外部完成自定义交互配置，可通过选中特定实例项进行交互，增强交互配置灵活性。
Before: 未使用组件容器：需逐个对组件进行样式配置和数据配置，数据接入及后期的维护成本极大。
After 使用组件容器：自定义拼接组件后，统一在组件容器外部接入数据源，统一接入数据源，完成数据分发，通过数据驱动，按照设定的自动布局，可批量渲染生成相同实例模块。
基本概念及使用流程
基本概念
📦 组件容器：自定义拼接组件（即实例）的生产容器，容器大小即为各实例对外可视区域大小。
🧩实例：
1）预设实例：在组件容器的编辑模式内，自定义拼接组件的实例模版。
2）其他衍生实例：通过数据驱动，按照设定的自动布局，渲染生成的其他相同模块。
使用流程
样式
1.基本属性
可设定组件容器的位置、大小以及背景颜色or背景图（背景图默认铺满整个容器）。
2.自动布局
由于组件容器会根据预设实例，根据数据驱动生成多个重复模块。
固定行数：当选择固定行数时，填写行数后，实例会按照预设的行数，优先排布行数进行展示。例如数据有7条时，行数设置为2，则数据展示为两行 (优先保证充满两行）。行数设置为3，则数据展示为三行 (优先保证充满三行）。
固定列数：当选择固定列数时，填写行数后，实例会按照预设的列数，优先排布列数进行展示。例如数据有7条时，列数设置为2，则数据展示为两列 (优先保证充满两列）。列数设置为3，则数据展示为三列 (优先保证充满三列）。
间距：可手动设置各个实例之间的行距和列距。
3.滚动设置
当组件容器内的实例大小超过组件容器的可视区域大小时，可设置滚动动画，对超出部分进行滚动展示。可选择滚动方式为自动滚动/手动滚动。
1.当选择固定行数时，自动滚动方式为左右滚动。
2.当选择固定行列数时，自动滚动方式为上下滚动。
组件容器编辑模式
操作步骤：
1.双击进入容器内自定义拼接组件、调整样式大小等
双击进入组件容器内，可拖拽任意组件，并进行自定义拼接。悬浮组件时，可看到容器及实例大小，以便对组件的展示进行参照。（提醒：由于组件容器会根据预设实例，由数据驱动，渲染出多个相同模块。为了使展示效果更友好，可尽量选择性能消耗小、轮播效果少的组件。）
组件容器编辑模式内👇🏻
组件容器编辑模式外👇🏻
2.可退出编辑模式进行样式的预览。组件容器会默认展示三个数据示例——对应三个实例，可进行参照比对。同时也可复制多条数据驱动实例展示。
数据接入
数据分发逻辑：给组件容器接入总的数据源之后。给组件容器内实例中的组件标记组件标识。通过过滤器的配置完成数据的映射和分发，并由数据驱动，渲染生成多实例模块。
标准数据格式：
1.组件容器接入数据源。
可在组件容器的数据一栏接入总的任意格式数据源。
2.自定义组件标识。
组件标识：可自定义输入组件标识，根据组件标识进行数据的映射和分发。
方式1.在组件容器的数据一栏，选择组件（组件容器内添加的组件），进行自定义标识的输入。
方式2.可在编辑模式内，数据源选择：接收组件容器数据，再给每个组件分别输入组件标识。（编辑模式内和组件容器-数据，设置的组件标识时，内外部互相联动，根据使用习惯设置和查看即可）
3.数据关系处理，基于组件标识完成数据映射和分发。（注：组件内的数据来源需切换为【接收组件容器数据】，才能接收外部数据源，完成数据的分发）
可在过滤器中对数据进行数据处理，完成数据的映射和分发。
标准数据格式：
交互配置
组件容器内的任意实例都可与内外部完成自定义交互配置，可通过选中特定实例项进行交互。
1.组件交互组件容器整体
可选择交互对象为组件容器，可交互动作为平台通用动作以及轮播相关动作。
2.其他组件交互组件容器内任意实例
例如：点击选项卡A、B、C....F 分别控制组件容器内各个形状组件的显隐。
首先需要选择组件容器内的形状组件，然后配置选中交互项。
选中交互项：即用来选择交互组件容器内的哪个实例。
该动作所需要接收的数据，return的值将作为选中的实例的下标。如选择多个实例，return的值需是字符串下标，如‘2,3’ 如选择某单个实例，return 的值可以为 数值 1
3.组件容器内任意实例 交互其他组件
如控制 组件容器内各个形状组件交互其他图表组件。
1.给形状组件配置自定义事件，如果控制第一个形状组件交互其他组件，则可以选中形状组件，在选择交互项的index中输入1
index: index即为容器内各个实例的下标，可选中特定实例项进行交互，从1开始
同时也可以在自定义条件中通过代码配置。如：希望选择 index>1 的所有实例触发交互。
一些小说明：
当未使用组件容器配置自定义事件时（即平台其他通用组件），不存在选中交互项的配置。当未输入自定义条件时，并点击保存，此时自定义事件是不生效的。
而当组件容器内，已经配置index的情况下，未设置条件时，此时做了逻辑兼容，可默认条件，完成自定义事件的配置生效。
🎨实操视频，带你快速上手组件容器使用！
案例demo下载
案例效果图
案例效果图
如遇其他使用问题，可扫描下方二维码，获取更多产品支持~
