Skip to main content

评分（Rating）组件

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

一、内容​

1、数据​

1.1 最大星星数​

可以设置评分组件显示的星星总数，默认设置为 5

1.2 默认评分​

可以设置评分组件初始显示值，默认设置为 3

1.3 提示气泡​

可以设置评分组件星星对应的文本信息，可以看下面的示例数据结构：

["烂透了", "不好", "一般", "好", "好极了"];

2、属性​

2.1 允许半星​

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

该功能允许用户在设置评分的时候，可以设置半星评级

2.2 是否显示​

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

可以控制评分组件在页面上是否显示

2.3 禁用​

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

可以控制评分组件在页面上是否可用

2.4 只读​

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

该功能开启后，用户无法进行评分设置，但提示气泡依旧可正常显示

2.5 加载时显示动画​

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

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

2.6 高度​

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

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

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

3、事件​

3.1 onChange​

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

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

二、组件属性​

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

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

{
  {
    Rating1;
  }
}

2.1 isVisible​

该属性可以反应组件的可见状态，是 True 还是 False，可以看下面的示例：

{
  {
    Rating1.isVisible;
  }
}

2.2 maxCount​

该属性可以反应组件设置的最大星星数，可以看下面的示例：

{
  {
    Rating1.maxCount;
  }
}

2.3 value​

该属性可以反应组件当前设置的星星数，可以看下面的示例：

{
  {
    Rating1.value;
  }
}

三、组件属性设置方法​

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

3.1 setVisibility​

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

{
  {
    Rating1.setVisibility(true);
  }
}

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

3.2 setDisabled​

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

{
  {
    Rating1.setDisabled(true);
  }
}

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

3.3 setValue​

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

{
  {
    Rating1.setValue(4);
  }
}

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