Skip to main content

开关组（SwitchGroup）组件

本文将介绍开关组（SwitchGroup）组件的使用，下拉多选组件功能分【内容】及【样式】两块选项，用户根据自己的需求进行内容的编辑及样式的修改

一、内容​

1、数据​

1.1 选项​

选项这里可以通过【数据源查询】、【Api 查询】动态将数据绑定到开关组组件上，数据格式必须是具有 label、value 属性的对象数组

  • 例如开关组组件支持数据格式为 JavaScript 对象数组，可以看下面的示例：
[
  {
    label: "蓝",
    value: "BLUE",
  },
  {
    label: "绿",
    value: "GREEN",
  },
  {
    label: "红",
    value: "RED",
  },
];

如果数据格式不符合要求，可以通过.map()函数将数据转换为所需的格式

1.2 默认选中值​

可以设置开关组组件默认选中的初始值，需要配置 value 属性，可以看下面的示例：

可以以数组或者是通过{{ }}动态的绑定

["BLUE", "RED"];

2、标签​

2.1 文本​

可以配置开关组组件的文本标题，如果不需要显示文本，选项为空即可，可以看下面的示例子：

2.2 位置​

可以设置文本标题的位置，有三类选项可选择：自动、左、上

名称描述
自动文本标题根据组件本身的高度确定
左文本标题摆在组件的左侧
上文本标题摆在组件的顶部

3、校验​

3.1 必填​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

开启该功能后，用户必须开启某一项开关内容

4、属性​

4.1 提示​

该功能需要有文本标题的情况下才可使用

开启该功能后，在文本标题右侧会有一个 ❓ 号的提示标识，供用户查看提示消息

4.2 是否显示​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

可以控制开关组组件在页面上是否显示

4.3 禁用​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

可以控制开关组组件在页面上是否可用

4.4 行排列​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

可以控制开关组组件是水平排列还是竖直排列

4.5 加载时显示动画​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

可以控制开关组组件在数据加载渲染的时候是否显示动画效果

4.6 高度​

该功能可以配置开关组组组件的高度大小

名称描述
固定高度通过拖拽边框来控制组件的大小，使其固定不变
自动高度组件根据画布内容及其他情况可以自行动态调整
区间自动高度与自动高度差不多，支持设置组件占用的最小、最大行数

5、事件​

5.1 onSelectionChange​

点击旁边的 JS 图标可以自行编写代码

可以设置用户对选项内容选择时触发的事件动作

二、组件属性​

开关组组件支持多种属性供用户灵活开发，后面将挑选几个常用属性进行描述

如需了解更多，可以在画布中拖入一个 text 文本组件，可以看下面的示例

{
  {
    SwitchGroup1;
  }
}

2.1 selectedValues​

该属性可以获取当前开关组组件选择项的 Value 属性，可以看下面的示例：

{
  {
    SwitchGroup1.selectedValues;
  }
}

三、组件属性设置方法​

该方法支持在应用运行的过程中对组件属性的值进行修改，这些方法是异步的并返回 Promise。你可以使用.then()来确保 PagePlug 中后续代码行的执行和排序

3.1 setVisibility​

该方法可以设置 isVisible 属性的值，可以看下面的示例：

{
  {
    SwitchGroup1.setVisibility(true);
  }
}

如果要执行顺序操作，请使用.then()，可以看下面的示例:
SwitchGroup1.setVisibility(true).then(() => {});

3.2 setDisabled​

该方法可以设置 isDisabled 属性的值，可以看下面的示例：

{
  {
    SwitchGroup1.setDisabled(false);
  }
}

如果要执行顺序操作，请使用.then()，可以看下面的示例:
SwitchGroup1.setDisabled(true).then(() => {});

3.3 setRequired​

该方法可以设置 isRequired 属性的值，可以看下面的示例：

{
  {
    SwitchGroup1.setRequired(true);
  }
}

如果要执行顺序操作，请使用.then()，可以看下面的示例:
SwitchGroup1.setRequired(true).then(() => {});