UIOTOS 示例3：视频选择播放| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等

注意:本文为自动抓取供AI学习!!格式未经调整，点击[查看原文档](https://www.yuque.com/liuhuo-nc809/uiotos/gl6zzskh13sucs6q?singleDoc# 《示例3：视频选择播放》)!

目标

熟悉输入框、下拉框、按钮等常见组件，以及如何用连线实现一个典型的交互效果，如下所示：

过程中，涉及到将数据通过用户数据（每个组件都有）属性逐级传递这种操作。

步骤

新建

略。参见1新建。命名为视频列表选择播放。

拖放组件

拖入视频、输入框、下拉框、按钮组件，并进行属性设置。步骤如下：

• 步骤1：拖入视频（面板中组件-视频）。
• 步骤2：拖入输入框（面板中组件-表单）。外观属性组设置：
  • 设置标签文本为“当前视频URL”。
  • 勾选标签内嵌和垂直排布，参见[标签文本相关]。
• 步骤3：拖入下拉框（面板中组件-表单）。属性设置：
  • 设置外观-标签文本为“视频列表选择”。
  • 勾选标签内嵌和垂直排布，参见[标签文本相关]。
  • 设置功能-数据内容，格式参见数据内容（datas）。如下所示：
  • 
• 步骤4：拖入普通按钮（面板中组件-表单）。设置外观-文字属性为“播放”。

操作过程如下：

连线操作

本示例中各组件的逻辑关系如下：

• 下拉框的选择ID顺次传递给输入框的值内容、按钮的用户数据、视频的路径。
• 按钮的点击事件，触发视频的自动播放。

这些逻辑关系，都分别对应连线操作，具体步骤如下：

• 步骤1：选择ID（下拉框）→值内容（输入框）
• 步骤2：值内容（输入框）→用户数据（按钮）

   注意：`用户数据`（每个组件都有），详情可参见[用户数据](https://www.yuque.com/liuhuo-nc809/uiotos/fgi6dd7gado51acm#AaGqw)

• 步骤3：用户数据（按钮）→路径（视频）
• 步骤4：点击事件（按钮）→自动播放（视频）。

注意：连线样式可以调整，参考线条样式设置。其他相关注意事项，可参考示例2的连线操作。

附加布局设置

• 步骤1：选中视频组件，右键-自动布局（或快捷键shift+回车），然后手动设置横纵反向中心。
• 步骤2：其他组件的布局也同样横纵方向中心设置。可参见布局。
• 步骤3：保存、预览。

小结

• 数据可以通过连线可逐级传递。（示例中用到用户数据属性）
• 组件可以多条连线，操作不同属性。参见连线执行顺序（示例中按钮传递链接，随后触发播放）
• 下拉框数据的显示和值可以独立。