UIOTOS文档：扩展按钮组（增加属性）| 页面嵌套零代码低代码 0代码无代码 iframe 数据大屏 web组态前端框架 | 致敬amis codewave 乐吾乐 goview dat

本文链接：https://blog.csdn.net/qq_69807227/article/details/141379619

注意:本文为自动抓取供AI学习!!格式未经调整，点击查看原文档!

目标

前面通过示例4：视频播按钮自定义，介绍了点击按钮通过容器嵌套，封装成切换按钮的全过程。本篇再专题介绍按钮组组件，如何通过连线和嵌套封装，不用一行代码，实现组件功能的扩展升级。具体说明如下：

现状
各按钮文字（buttons）属性，用于显示各按钮文字。
当前索引（select）属性，用来对应当前选中的按钮。

需求
提供数组设置任意数据，对应各按钮文字（buttons）。
切换按钮时，不仅输出当前索引（select），还能输出对应的自定义数据项。

效果如下：

按钮组默认输出0、1、2，现在支持输出任意设置的day、month、year。

特别说明：

旧版的按钮组默认功能不满足上述需求，因此本篇介绍的封装能起到实际用途。新版已经升级了组件代码，增加了各按钮数据（btnDatas）和当前数据（btnData）属性，正用于此。
不过，本篇同样具有很强的参考和学习意义。组件部分欠缺的功能，无需代码二次开发或等待产品升级，可尝试嵌套封装扩展功能，达到与代码开发等同效果。

步骤

以下内嵌页来封装组件，主页面用于测试和使用。步骤分别如下：

内嵌页

在独立页面中对按钮组组件做通用化封装，封装效果和涉及的实现方式，与示例4的内嵌页极为类似，也主要用到解析赋值通过索引对数组的读取和设置。主要思路：

下拉框设置按钮组对应的各数据项（这里为["day","moth","year"]）。
工具函数主动获取下拉框的数据，而连线解析赋值由按钮组的索引值动态给定。

新建

略。参见1新建。命名为"btnsGroup"。

拖放组件

拖入按钮组、下拉框组件和获取组件属性值工具函数，并进行属性设置。

**步骤1：**拖入按钮组（面板中组件-表单）。设置各按钮文字，从左向右依次设置“本日”、“本月”、“本年”。如下所示；

**步骤2：**拖入下拉框（面板中组件-表单）。设置功能-数据内容，格式参见数据内容（datas）。如下所示：

**步骤3：**拖入获取组件属性值（面板中组件-函数）。

完整操作如下：

连线操作

步骤1：下拉框连向函数，传出指定索引值。数据内容（下拉框）→输入（组）（获取组件属性值），如下所示：

注意：解析赋值通常需要设置索引，才能从关联的数组属性中取值传出。这里不用手动写死，交由步骤2动态设置。

步骤2：按钮组当前索引，传给步骤1的解析赋值。步骤1中，未对连线的解析赋值设置值，由这里传入。按钮切换时，索引动态传入，对应下拉框指定索引项数据输出。如下所示：

步骤3：按钮组同时触发函数执行，输出对应数据项。由于下拉框的数据内容（datas）值不变，不会主动触发连线传递，因此需要通过获取组件属性值函数主动获取。需要注意，需先传索引给按钮组，再执行函数，才能确保正确的逻辑。参见连线执行顺序。

完整操作如下：