一、文档概述

本文主要介绍如何使用 zCloud 低代码组件配置一个联动型的组件。

二、配置概述

2.1 交互设计

首先，我们来看一下设计图，也就是本次要搭建的组件，如图 1.1 所示：

                                                                                    图 1.1

2.2 配置目标

• 可以看到，该组件是由一个下拉选择组件和一个搜索组件组成的，我们需要将这两个组件组合起来，构成一个联动型组件。

三、配置步骤

• 首先，拖拽一个“普通容器”到中间的内容区；
• 然后，依次拖入下拉组件和搜索组件到普通容器中；
• 点击普通容器，设置flex布局，并调整方向和对齐，如图 1.2 所示：

                                                                                        图 1.2

• 新建一个全局变量，代表“下拉选择”组件选中的值，如图 1.3 所示

                                                                                    图 1.3

                                                                                    图 1.4

• 给“下拉选择”组件添加值改变事件，如图 1.4 和 1.5 所示

                                                                                    图 1.5

• "下拉选择"组件的值改变以后，修改全局变量的值。如图 1.6 所示

                                                                                    图 1.6

• 同样的，“单行输入”的值改变了也添加监听事件；
• 根据需要，可以根据“下拉选择”绑定的全局变量值，生成不同的“单行输入”内容，从而实现联动。