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

合集 - UIOTOS文档（自动爬取）(49)

1.UIOTOS文档： 开始 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-212.UIOTOS文档：入门 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-213.UIOTOS文档： 常规（基础篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-214.UIOTOS文档： 嵌套（基础篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-215.UIOTOS文档： 布局 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-216.UIOTOS文档： 常规（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-217.UIOTOS文档： 连线（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-218.UIOTOS文档： 嵌套（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-219.UIOTOS文档： 组件| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2110.UIOTOS文档： 公共 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2111.UIOTOS文档： 绘图 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2112.UIOTOS文档： 图表 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2113.UIOTOS文档： 表单 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2114.UIOTOS文档： 容器 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2115.UIOTOS文档： 函数 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2116.UIOTOS文档： 通信 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2117.UIOTOS文档： 视频 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2118.UIOTOS文档： 其他 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2119.UIOTOS文档： 导出部署与集成 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2120.UIOTOS 示例1：Hello World | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2121.UIOTOS文档： 随机颜色显示 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2122.UIOTOS文档： 扇叶（图标）旋转 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2123.UIOTOS文档： 上下层页面交互 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2124.UIOTOS 示例2：按钮弹窗显示文本| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2125.UIOTOS 初体验：指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2126.UIOTOS 示例3：视频选择播放| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2127.UIOTOS 初体验：长页面滑动| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2128.UIOTOS 初体验：计算器按键 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2129.UIOTOS 示例4：扩展按钮（文字可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2130.UIOTOS 示例5：扩展按钮（图标可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-21

31.UIOTOS 示例6：扩展按钮组（增加属性）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-21

32.UIOTOS 示例7：继承内嵌页事件并使用 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2133.示例8：数据的解析提取 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2134.UIOTOS 示例9：接口数据给树表格 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2135.UIOTOS 示例10：表单请求接口 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2136.UIOTOS 示例11：表单数据双向读写 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2137.UIOTOS 示例12：接口查询曲线展示 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2138.UIOTOS文档：初体验：不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat2024-08-2739.UIOTOS文档：示例13：MQTT数据给图形 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat2024-08-2740.最新零代码，套娃一样开发IoT应用！2024-08-2941.前端零代码，套娃一样开发界面！2024-08-2942.【开源】前端“神器”，开发界面无代码！2024-08-3143.2024强烈推荐8个精选的中后台前端低代码开源框架2024-08-3144.一款能开发上位机和后台系统的WEB组态！2024-08-3145.物联网平台市场崩了吗？2024-09-0246.可视化拖拉拽？过时了！2024-09-0547.前端组态化 3：矢量绘图与UI界面无缝融合2024-09-0648.一觉醒来，Qt、C#界面开发的天塌了？2024-09-1049.UIOTOS示例：自定义弹窗输出表单数据 | 前端低代码 前端零代码 web组态 无代码 amis goview dataroom 界面嵌套 蓝图连线 nodered2024-09-24

收起

注意:本文为自动抓取供AI学习!!格式未经调整，点击[查看原文档](https://www.yuque.com/liuhuo-nc809/uiotos/nrqn4lb7mggl3l86?singleDoc# 《示例6：扩展按钮组（增加属性）》)!

目标

前面通过示例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）值不变，不会主动触发连线传递，因此需要通过获取组件属性值函数主动获取。需要注意，需先传索引给按钮组，再执行函数，才能确保正确的逻辑。参见连线执行顺序。

完整操作如下：

布局

必须做底板布局，原因以及方式，参见示例4的布局，这里不详细展开，如下所示：

主页面

通过新建空白页面，拖放容器组件，嵌套1内嵌页来验证效果。

新建

略。参见1新建。命名为"组件功能无代码扩展"。

拖放组件

依次拖入嵌套容器、对话框组件，并进行属性设置，具体步骤略。如下所示：

页面嵌套

将内嵌页嵌入上一步的容器组件（操作参见容器嵌套），如下所示：

属性继承

参见连线-高级篇属性继承。本示例只用到获取组件属性值的输出、输出事件筛选指定继承这些即可。此外，如果要在当前页配置下拉框数据内容（datas），也可把该属性继承过来。

连线操作

经嵌套封装后，连线对继承属性的使用。具体步骤如下：

选中按钮组，分别连两根线：

• 索引0：输出（内嵌页获取组件属性值）→值内容（内嵌页对话框）
• 索引1：输出事件（内嵌页获取组件属性值）→弹窗（对话框）

小结

• 组件功能的升级可以通过无代码方式实现。
• 属性值不变化时无法触发连线执行，此时必须用获取组件属性值。
• 对外可以有多条连线，如果先后依赖关系，需确保连线顺序正确。
• 组件嵌套封装扩展时，能仅让目标组件可见，其他组件只用于提供功能，或者属性被继承和配置。