设置UI引擎前端页面组件高级配置属性
在UI引擎页面设计器中，所有内置组件均提供“高级配置”属性，通过右侧“高级”设置面板，开发者可对组件的条件渲染、循环渲染相关参数进行精细化配置，同时设置组件事件以实现数据交互，底层均基于Vue的“v-if”和“v-for”语法实现，兼顾易用性与语法规范性。
前提条件
- 已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。
- 当前页面已完成至少一个组件的添加或布局设计，具体操作请参见创建前端页面。
高级配置属性说明
高级配置属性是实现组件动态渲染的核心配置项，各属性的具体含义、功能及变量绑定支持情况如下所示：
|
属性名 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
是否渲染 |
控制组件是否根据条件动态显示或隐藏（对应Vue的“v-if”语法）。
|
Y |
|
循环数据 |
适用于需要重复渲染的模块，可在此设置要循环的数组数据（类似Vue的“v-for”用法）。 如果页面中存在多份结构相同、内容动态生成的内容，可通过此功能实现数据驱动的循环渲染。 |
Y |
|
迭代变量名 |
在循环渲染中子项对应的变量名，默认为“item”。 |
N |
|
索引变量名 |
循环渲染中的索引变量名（即数组索引），默认为“index”。 |
N |
|
key |
用于在循环渲染中为每个节点提供唯一标识，默认为当前索引值“index”。 建议根据实际情况（如数据中的“id”字段）设置具有稳定唯一性的值，以优化Vue的虚拟DOM更新性能。 |
N |
循环渲染配置
当页面需要展示若干份重复且动态生成的内容时（如商品列表、表格数据等），可以使用循环渲染功能。其实现基于Vue的“v-for”语法。
以下以“文本”组件为例，介绍具体配置步骤：
- 根据创建与绑定页面状态变量，添加一个页面状态变量（如“list”），并将其“初始值”设置为一个数组。
图1 添加list状态变量
初始值示例：
[ "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" ]
- 在页面设计器的中心画布区，单击选中目标组件（如“文本”组件）。
- 在右侧设置面板中，单击
，展开“高级”设置面板。 - 在“高级配置”下，单击“循环数据”右侧的
，弹出“变量绑定”窗口。
图2 循环数据
- 在“变量列表”的“State属性”分类下，选择1创建的状态变量“list”，单击“确定”。
图3 绑定状态变量
- 在右侧设置面板中，单击
，切换至“属性”设置面板。 - 在“基础信息”下，单击“文本内容”右侧的
，弹出“变量绑定”窗口。 - 在“变量”栏中，填写默认迭代变量“item”（如果为对象数组，需通过“item.propertyName”的形式指定对象属性，如“item.name”），单击“确定”。
完成变量绑定后，可直接在页面设计器的中心画布区查看组件的循环渲染效果。
图4 渲染效果
对应的底层代码示例参考如下：
图5 代码示例
条件渲染配置
在页面开发中，可能需要根据某些条件动态显示或隐藏组件内容。此时可以使用条件渲染功能，其实现基于Vue的“v-if”语法。
以下以“文本”组件为例，介绍具体配置步骤：
- 根据创建与绑定页面状态变量，添加一个布尔类型的页面状态变量（如“visible”），作为条件渲染的判断依据。
图6 添加visible状态变量
- 在页面设计器的中心画布区，单击选中目标组件。例如“文本”组件。
- 单击组件右下方的
，复制一份组件。 - 为两个组件分别设置不同状态下需要显示的内容。
图7 设置文本内容
- 在页面设计器的中心画布区，单击选中其中一个组件。
- 在右侧设置面板中，单击
，展开“高级”设置面板。 - 在“高级配置”下，单击“是否渲染”右侧的
，弹出“变量绑定”窗口。 - 在“变量列表”的“State属性”分类下，选择1创建的状态变量“visible”，单击“确定”。
图8 绑定visible变量
- 重复5 - 8操作，为第二个组件绑定“visible”变量，并对变量进行手动取反，实现两个组件的互斥显示。
图9 取反visible变量
完成变量绑定后，可直接在页面设计器的中心画布区查看静态渲染效果。
如需动态查看条件渲染效果，可在画布中添加“按钮”组件，并绑定一个切换状态变量值的事件函数，在预览页面中通过按钮切换状态变量的值查看不同状态的显示效果。
图10 动态查看条件渲染效果
