级联下拉框

2025年1月14日大约 3 分钟

级联下拉框2024.5+

以级联面板的形式展示选项，方便用户逐步筛选数据。

属性

基础

组件标题： 用于在图层和节点编程中显示组件的名称。修改后在图层和节点编程中搜索组件时按照新标题进行搜索。1.1+
组件尺寸： 组件的宽度和高度，单位为px。
- 锁定纵横比：：单击切换是否锁定纵横比，锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+
组件位置： 组件在大屏中的位置，包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
隐藏时解析： 默认组件设置隐藏后组件不解析，组件配置的数据资源及交互事件，节点编程事件都不会执行。当开启隐藏时解析时，上述功能将执行。
提示
隐藏时解析常用于页面中不需要展示组件但要获取相关数据。

尺寸： 设置组件尺寸，可选 大、中、小、超小。
占位文本： 设置没有选中值时输入框中的展示文本。适用于在未选择任何值时向用户提供提示信息。
是否多选： 设置是否开启多选功能。开启后，用户可以选择多个选项。
折叠选项： 设置是否在多选模式下折叠已选中的选项。开启后，已选中的选项会折叠显示。
清空选项： 设置是否显示清空选中项的图标。开启后，输入框右侧会显示清空图标，点击后可清空所有选中项。
搜索选项： 设置是否在选项中提供搜索功能。开启后，用户可以通过输入关键词搜索选项。
全部路径： 设置输入框中是否显示选中值的完整路径。开启后，输入框中会显示选中值的完整路径（如“父节点/子节点”）。关闭后，输入框中仅显示选中值的名称（如“子节点”）。
节点独立： 设置是否严格遵循父子节点不互相关联。开启后，父子节点的选择互不影响，用户可以选择父节点而不选择子节点，反之亦然。

盒样式

高斯模糊： 模拟半透明磨砂玻璃的观感，结合透明度，使得背后的元素变得模糊，但轮廓和颜色仍依稀可见，同时保持一定的视觉通透性。2024.3+
透明度： 设置组件的透明度，取值范围为0~1。当为0时，组件隐藏；当为1时，组件显示。默认透明度为 1。
2D 旋转： 设置组件的旋转角度度数。默认旋转度数为 0，其最大旋转度数为 360 度，从左向右拉取滑块为顺时针旋转。
3D 旋转： 点击在下拉框中选择3D旋转。4.2+
- X 轴：基于横轴旋转，值为角度度数；
- Y 轴：基于纵轴旋转，值为角度度数；
- Z 轴：基于垂直于屏幕的轴旋转，值为角度度数（特别的，若只设置 Z 轴的值，则效果等同于 2D 旋转）。
- 透视距离：观察者与屏幕之间的距离。值越大，距离屏幕越近；值越小，距离屏幕越远。默认为 500。
- 透视位置：观察者与目标物之前的位置。分别代表 X 轴和 Y 轴，值为百分比值，取值范围为 0 ~ 100。默认 50|50，即正对目标物。
边框： 设置组件边框样式。
- 单击设置单边样式。
- 按 Ctrl 键，连续单击手柄，可同时设置多边样式。
- 单击选中状态同时设置四边样式。
- 可设置单个边框得显隐、颜色、宽度和类型。
圆角： 设置边框圆角，可分别设置四个方向的圆角大小。
背景：3.0+
- 单击设置纯色背景。
- 单击添加多个颜色设置渐变色背景。
- 背景渐变色：线性渐变、径向渐变。
  - 线性渐变：可通过调整角度改变背景渐变的方向。
  - （1） 控制颜色交界线的渐变角度。
  - （2） 选择起始颜色并控制占比。
  - （3） 选择过渡颜色并控制占比。
  - 径向渐变：从组件中心向周围渐变，可选择“椭圆形”和“圆形”作为组件背景中心的形状。
  - （1） 控制渐变中心的形状。
  - （2） 选择起始颜色并控制占比。
  - （3） 选择过渡颜色并控制占比。
- 背景图片：素材库图片、图片地址。
区域阴影：
- 单击设置阴影颜色。
- 单击切换阴影显示内部或外部。
- 水平： 阴影的水平偏移量。值为0时阴影在组件下方，值>0时阴影向右侧偏移，值<0时阴影向左侧偏移。
- 垂直： 阴影的垂直偏移量。值为0时阴影在组件下方，值>0时阴影向下方偏移，值<0时阴影向下方偏移。
- 模糊： 阴影的模糊程度。值为0时阴影没有模糊效果，值越大阴影效果越明显。
- 尺寸： 阴影的尺寸。值为0时阴影与组件大小相同，值>0时阴影比组件大，值<0时阴影比组件小。

编辑框

背景颜色: 设置编辑框背景颜色。
高度: 设置编辑框高度。
字体颜色: 设置编辑框字体颜色。
字体大小: 设置编辑框字体大小。
字体粗细: 设置编辑框字体粗细，可选 普通、加粗、更细。
字体: 设置编辑框字体样式，可选系统内置字体和自定义字体。
边框颜色: 设置编辑框的边框颜色。
边框宽度: 设置编辑框的边框宽度。
边框类型: 设置编辑框的边框类型，可选 实线、虚线、点状线。

选中标签样式： 设置选中标签样式设置。仅在开启多选时可配置。属性配置与编辑框基本属性一致。

数据

静态数据

上图中的示例JSON代码如下：

[
    {
        "id": 0,
        "parentId": 2,
        "label": "选项1",
        "value": "option1",
        "selected": false,
        "disabled": false
    },
    {
        "id": 1,
        "parentId": 2,
        "label": "选项2",
        "value": "option2",
        "selected": true,
        "disabled": false
    },
    {
        "id": 2,
        "parentId": 20,
        "label": "选项3",
        "value": "option3",
        "selected": false,
        "disabled": false
    },
    {
        "id": 3,
        "parentId": 20,
        "label": "选项4",
        "value": "option4",
        "selected": false,
        "disabled": true
    },
    {
        "id": 4,
        "parentId": 2,
        "label": "选项5",
        "value": "option5",
        "selected": true,
        "disabled": false
    },
    {
        "id": 5,
        "parentId": 2,
        "label": "选项6",
        "value": "option6",
        "selected": true,
        "disabled": false
    },
    {
        "id": 6,
        "parentId": 4,
        "label": "选项7",
        "value": "option7",
        "selected": false,
        "disabled": false
    },
    {
        "id": 7,
        "parentId": 4,
        "label": "选项8",
        "value": "option8",
        "selected": true,
        "disabled": false
    },
    {
        "id": 8,
        "parentId": 6,
        "label": "选项9",
        "value": "option9",
        "selected": false,
        "disabled": false
    },
    {
        "id": 9,
        "parentId": 8,
        "label": "选项10",
        "value": "option10",
        "selected": true,
        "disabled": false
    }
]