UIOTOS文档：容器 | 页面嵌套零代码低代码 0代码无代码 iframe 数据大屏 web组态前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等

前端零代码

已于 2024-08-30 11:37:26 修改

阅读量940

点赞数 26

分类专栏： UIOTOS文档（自动爬取）文章标签：低代码前端框架零代码 WEB组态 iframe qt nodered

于 2024-08-17 20:39:04 首次发布

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

版权

UIOTOS文档（自动爬取）专栏收录该内容

54 篇文章 0 订阅

订阅专栏

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

相关内容：

嵌套（基础篇）
嵌套（高级篇）
组件分类（容器）

当前给AI阅读的，您可以查看原地址：https://www.yuque.com/liuhuo-nc809/uiotos/uta20ga5uu55wvqw

本篇主要列出不同容器组件各自独有的属性，容器公共的属性参见容器组件。

嵌套容器（`graphView`）

说明

用途

最常规的容器组件，仅提供嵌套基础功能，本身无任何其他专属功能。相比之下，对话框可以弹窗、tab页签可以多页切换，滚动页能够超出内容区域滑动等。

示例

使用

设置页面路径（display）属性即可。

属性

参见容器组件。

对话框（`dialog`）

说明

用途

形态：支持模态和非模态弹窗。
外观：可隐藏默认的头脚，通过内嵌页实现弹窗界面完全自定义。
位置：弹窗默认居中，也可指定区域，或四周贴边显示。
其他：支持与Tab页签组件关联，作为多页签公共的表单弹窗（参见关联页签）

示例

使用

设置页面路径（display）属性即可。

属性

功能

弹窗（`show`）

布尔类型``可读写

弹出对话框。

关闭＊（`hide`）

:::danger
注意：该属性需勾选专业模式才可见。仅嵌套容器组件支持。
:::
布尔类型``可读写

关闭对话框。通常关闭是通过点击遮盖层或点击按钮关闭，本属性较少使用。

模态遮罩（`modal`）

布尔类型``可读写

是否为模态弹窗。模态弹窗时，需要关闭弹窗后才能操作其他；非模态弹窗时，可同时操作对话框的其他区域。

模态弹窗通常带有遮罩阴影，参见背景颜色（background）配置。点击遮罩区域就能关闭对话框，等同于点击取消按钮或右上角×并触发相应事件。如下所示：

窗体内嵌 ★（`embedded`）

注意：该属性需展开才能看到。

布尔类型``可读写

是否嵌入指定区域显示，而非默认全屏居中弹窗。

对话框窗体默认显示全屏居中，按照设定的尺寸显示。有时候需要弹窗在指定区域上方遮盖显示，或者贴边显示，此时就需要用到窗体内嵌，如下所示：

勾选后编辑状态下无法触发弹窗，只有运行状态下可以正常弹窗。
勾选后拖放到底板之外布局，运行时会自动贴边弹窗显示。这样不会影响被遮盖区域的编辑。
勾选通常对应着底板布局、非模态遮罩（modal）、隐藏头部显示（headerVisible）、隐藏脚部显示（footerVisible）等属性设置。

机制说明：

对话框窗体内嵌后做底板布局（以及布局参数设置），位置和尺寸的影响，跟常规组件通常无区别。
编辑时对话框完全在底板外（无交叠），与平移到底板内部贴边后布局，效果等价。平移规则如下：
区域分割

将底板上、下、左、右四边线无限延伸，将编辑区域分割为#字型的9块，如下所示：

位置平移

在上、下、左、右区域的，与平移到内部对应的临边后布局等价；在四角区域的，与平移到内部对应的临角后布局等价。

如下所示，在下方，则向上平移，直到下边与底板对齐；在左方，则向右平移，直到左边与底板对齐，如此类推：

注意事项

底板外的布局，通常需要微调布局参数，以达到预期的效果。

比如在下方一键自动布局，默认布局参数在垂直方向为下，运行时窗口尺寸变化，对话框与底板的上边间距是变化的。如果要实现固定，需调整参数为上&下。如下所示：

注意：示例这种情况有模态遮罩，通常需去掉才常见。

实例步骤：
实例1：自定义窗口外观并贴边弹窗显示如下所示，弹窗没有默认的头和脚，右上角关闭和底部取消确认按钮自定义（参见自定义对话框）。弹窗时，不是默认居中、固定配置的宽高，而是位置、尺寸始终贴边和弹性布局。

要实现这样的效果，需要3个步骤：

拖入对话框并勾选当前窗体内嵌属性。
隐藏默认对话框的头和脚，自定义外观。
摆放到底板外侧布局，并调整布局参数。

这里重点介绍步骤3：

对话框在窗体内嵌时，在底板外侧布局，效果等同于将对话框移到对应的贴边位置再做布局（这样编辑时不会遮盖对话框下的区域）。

如下所示：

底板下方内部贴边布局，会遮盖相关区域影响编辑。
底板下方外部布局，与内部贴边布局效果等同，且不遮盖。

实例2：收藏面板侧边弹窗配置界面实例

运行效果：
配置说明：

布局参数为水平：右，垂直：上 &下
勾选窗体内嵌，取消默认的模态遮罩勾选：

1723898177649)

加载动画 *（`enableLoading`）

:::danger
注意：该属性需勾选专业模式才可见。
:::
布尔类型``可读写

加载时是否提示过渡动画。

注意：启用加载gif动画（圆圈旋转）时，界面会阻塞至加载完毕（包括失败），因此可能会引起页面卡顿感。

调试占位 ★（`debugOccupied`）

:::danger
注意：该属性需勾选专业模式才可见。
:::
布尔类型``可读写

仅占据位置不触发弹窗响应。通常用于调试存留。勾选去掉后，会作为调试弹窗显示出来，避免调试完毕后需删除、下次需要时再放入，会较为繁琐。

页面保存 *（`displaySaving`）

:::danger
注意：该属性需勾选专业模式才可见。
:::
布尔类型``可读写

点击确定时，页面的修改将被保存。

编辑时页面组件的属性设置，ctrl+s时会保存，下次加载打开时能看到上次保存的结果。但是运行时页面通常不会保存，比如下拉框设置了某个值，当刷新页面，值会复位成上次默认的。如下所示：

勾选本属性后，点击确定，当前页面的所有修改，都将像编辑时那样，保存到页面，刷新时也生效。
通常以对话框作为表单设置页面，用于修改运行时页面数据，并保存。

相关实例还可参见关联页签 *（onPageBinded）。

打开时重加载 ★（`reloadWhenOpen`）

注意：该属性需展开才能看到。

布尔类型``可读写

弹窗时内嵌页面是否重新加载。若勾选，则每次弹窗会重加载内嵌页，否则继续显示上次已加载的内容（如果有输入设置，则再次弹窗时上次的保持不变）

关联页签 *（`onPageBinded`）

:::danger
注意：该属性需勾选专业模式才可见。
:::
对象数组类型``可读写

绑定Tab页签组件，当前作为公共表单弹窗，对多页数据读取显示和修改设置。
索引0：Tab页签标识。
索引1：Tab页签索引。

注意：这里要求页签的多页嵌套的是同一个页面，即相同模板的多页数据显示。此时，对话框将可以作为这些模板页公共的表单窗口，用于查看和编辑。

实例和步骤

Tab页签嵌套多个相同的页面。并且显示数据的组件依次做好标识。比如下面示例都是文字组件，标识依次是v1、v2、v3、v4：
对话框内嵌页，对应的输入框表单组件，也需要设置标识，其中与页签模板页的显示组件标识逐个对应，依次也是v1、v2、v3、v4：
对话框和Tab页签分别加载内嵌页后，两者之间无需任何连线操作，只需在本属性中配置关联的页签标识（索引0）即可。
随后切换不同的页签，点击弹窗，都能显示页签当前页各个组件的数据，并且可以在对一个输入框表单组件中修改，保存后会自动回写到页签当前内嵌页。
如果再配合对话框勾选页面保存 *（displaySaving），此时可以将回写的值保存到页面，刷新可以保持。

完整过程如下：

加载完成事件 *（`onDisplayLoaded`）

:::danger
注意：该属性需勾选专业模式才可见。
:::
事件类型``可读写

内嵌页面加载完成时触发。

点击确定事件（`onOk`）

事件类型``可读写

当点击“确定”时对外触发。

点击取消事件（`onCancel`）

事件类型``可读写

点击“取消”时对外触发。

注意：对外连线未指定关联点击取消事件时，默认都是点击确定触发，点击取消不会触发连线执行。

最终关闭事件（`onFinally`）

事件类型``可读写

不论是确定还是取消，都会触发。

只要对话框关闭，都会触发当前事件，不论是确定还是取消。

外观

标题头文字（`titleText`）

字符串类型``可读写

对话框左上角标题头文字。

标题头字体（`titleFont`）

:::danger
注意：该属性需勾选专业模式才可见。
:::
字体类型``可读写

对话框左上角标题头字体。

标题头字颜色（`titleColor`）

注意：该属性需展开才能看到。

颜色类型``可读写

对话框左上角标题头文字颜色。

内嵌颜色（`innerBackground`）

颜色类型``可读写
参见以下：

背景颜色（`background`）

颜色数组类型``可读写

对话框背景颜色组。

索引0：头部背景色。
索引1：底部（脚部）背景色
索引2：背景贴图色。
索引3：遮盖层颜色。

效果如下所示：

背景图（`backgroundImage`）

:::danger
注意：该属性需勾选专业模式才可见。
:::
图标路径``可读写

对话框的背景贴图。清空路径（输入空格，回车）时，弹窗可变成透明风格。

如下所示：

头部显示（`headerVisible`）

布尔类型``可读写

对话框标题头是否显示。

**如何不显示默认头脚，自定义对话框外观？**如下所示，对话框默认的头部显示（headerVisible）和脚部显示（footerVisible）都可以隐藏，完全交由内嵌页实现：

对话框最重要的是确定、取消、关闭（作用等同于取消，通常在在右上角）三个按钮，隐藏默认头和脚后，内嵌页任意搭建头和脚的界面，要让内嵌页按钮能起对应功能，只设置对应的特定标识即可：

确定：ok
取消：cancel
关闭：close

如下所示：

脚部显示（`footerVisible`）

尔类型``可读写

对话框脚部是否显示。

自定义底部/脚部，参见如何不显示默认头脚，自定义对话框外观？

单关闭（`closeButtonOnly`）

布尔``可读写

对话框头部只有一个关闭按钮（×）。

单按钮（`oneButton`）

布尔``可读写

对话框脚部只有一个操作按钮（默认为“确定”）。

默认取消（`cancelDefault`）

布尔``可读写

在勾选了单按钮（oneButton）时，如果希望默认改为为“取消”，勾选本属性即可。

边框圆角（`borderRadius`）

数字类型``可读写

对话框边框圆角，注意：最大值为35。

四周边距 *（`padding`）

:::danger
注意：该属性需勾选专业模式才可见。
:::
数字类型``可读写

对话框显示内容（包括头和脚）离四边的距离。

脚部按钮间隙 *（`footerButtonGap`）

:::danger
注意：该属性需勾选专业模式才可见。
:::
数字类型``可读写

脚部按钮（取消、确定）之间的间距。

脚部按钮文字 ★（`footerButtonGap`）

注意：该属性需展开才能看到。

字符串数组类型``可读写

脚部按钮的文字设置。可对应修改索引值：
索引0：默认为“取消”；
索引1：默认为“确定”。

关于脚部按钮的操作事件，需注意如下几点：

确定对应点击确定事件（onOk）。
取消对应点击取消事件（onCancel）。
点击确定时，会对默认外触发连线操作，可省去关联点击确定事件（onOk）
点击取消时，不会默认对外触发连线操作，需关联点击取消事件（onCancel）且不可省。

脚部按钮尺寸 ★（`footerButtonSize`）

注意：该属性需展开才能看到。

数字数组类型``可读写

脚部按钮的宽高，索引0、1分别对应宽度和高度。

关于脚部按钮的操作事件，需注意如下几点：