跳到主要内容

评分

WdRating

适用场景​

用于进行评分录入及展示，通过直观的图标表现评分值。

基础能力说明​

  1. 评分的基础属性支持选择组件尺寸、设置当前评分值。
  2. 评分的高级属性支持配置最小值、最大值、数值调整步长、图标颜色（在使用内置图标时生效）、自定义图标、配置提示文案生成函数。

扩展场景说明​

如何配置步长、图标展示样式​

示例

配置步长为 0.5，调整图标颜色，配置自定义图标。

配置方法

配置步长：评分属性区域-分数选择器-数值调整步长，输入 0.5 为目标步长。

调整图标颜色：评分属性区域-分数选择器-图标选中颜色，输入 rgb(255, 119, 158) 为目标颜色；在下方的图标未选中颜色输入栏中输入 rgb(132, 106, 165) 为目标颜色。

配置自定义图标：评分属性区域-分数选择器-默认图标，可以选择表示当前评分值的图标；评分属性区域-分数选择器-背景图标，可以选择在背景展示的图标。二者都支持选择内置图标和自定义图标。

示例​

交互式预览​

配置最小值、最大值、步长​

自定义图标颜色​

自定义图标​

配置不同大小​

自定义提示文案​

{
  tooltip: ({ value }) => `现在的评分值为: ${value}`;
}

属性​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
显示标题labelVisibleboolean

默认值：true

标题对齐labelAlignstring

表单场景下默认会跟随表单容器的标题对齐配置

标题换行labelWrapboolean

如果标题内容过长关闭时只显示一行、溢出省略；开启时换行展示。表单场景下默认会跟随表单容器的标题换行配置

标题位置layoutstring

设置标题在表单组件的展示位置，表单场景下默认会跟随表单容器的标题的位置配置

标题宽度labelWidthstring

您可以输入数值 + px、%等单位，示例：200px

表单场景下默认会跟随表单容器的标题宽度配置

标题提示labelTipsstring

PC/H5端生效

配置标题的工具提示内容

最小值minnumber0
最大值maxnumber

默认值：5

数值调整步长stepnumber

控制单次评分变化的最小幅度

默认值：1

默认图标iconstring

默认评分图标

默认值："td:star-filled"

自定义图标iconSrcstring

设置自定义图标地址

未选中图标backgroundIconstring

为空时，将使用默认图标显示未选中效果

评分背景图标

自定义未选中图标backgroundIconSrcstring

设置自定义图标地址

图标选中颜色foregroundColorstring

使用自定义图片作为图标时，颜色配置不生效

默认值："#ffcf48"

图标未选中颜色backgroundColorstring

使用自定义图片作为图标时，颜色配置不生效

默认值："#bfbfbf"

移动端显示下划线borderedH5boolean

关闭后移动端不显示底部下划线

默认值：true

callbacksobject

配置相关的函数

状态statusstring

默认值："edit"

必填requiredboolean

启用后该组件强制必填，值不可为空

必填标识requiredFlagboolean

启用后，组件若要求必填，则会显示必填星号标记

默认值：true

必填校验提示requiredMsgstring

启用必填，但组件值为空时的提示信息

默认值："该项为必填项"

绑定字段namestring

表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。

标题内容labelstring

示例："标题"

评分值valuenumber

当前评分值

组件尺寸sizestring

控制评分组件的大小

默认值："sm"

事件​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
值改变changeobject
  • value: number

    评分值
兼容三端

-

属性 API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
绑定字段namestring

表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。

标题内容labelstring
评分值valuenumber

当前评分值

最小值minnumber
最大值maxnumber
数值调整步长stepnumber

控制单次评分变化的最小幅度

是否展示visibleboolean

组件是否展示

是否禁用disabledboolean

组件是否禁用

是否只读readOnlyboolean

组件是否只读

方法 API​

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

方法名
方法标识
参数
方法说明
设置值setValuenumber值

通过 $w.id1.setValue("weda") 设置组件值

设置显隐setVisibleboolean显示

通过 $w.id1.setVisible(false) 设置组件为隐藏

设置禁用setDisabledboolean禁用

通过 $w.id1.setDisabled(true) 设置组件为禁用

清空值clearValue

通过 $w.id1.clearValue() 清空组件值

设置只读setReadOnlyboolean只读

通过 $w.id1.setReadOnly(true) 设置组件为只读

触发校验handleValidate

通过 $w.id1.handleValidate() 校验组件值

清除校验clearValidate

通过 $w.id1.clearValidate() 清除组件校验

样式 API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-rating-root组件最外层元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-rating-root {
  /* 在这里编写CSS 样式 */
}
H5 端根元素.wd-h5-rating-root可设定 H5 端的根元素样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-rating-root {
  /* 在这里编写CSS 样式 */
}
PC 端根元素.wd-pc-rating-root可设定 PC 端的根元素样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-rating-root {
  /* 在这里编写CSS 样式 */
}
小程序端根元素.wd-mp-rating-root可设定小程序端的根元素样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-rating-root {
  /* 在这里编写CSS 样式 */
}
组件标题样式.wd-rating-root .wd-form-item-wrap__label组件标题元素

:scope .wd-form-item-wrap__label {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
编辑态-校验信息.wd-rating-root .wd-g-text-error设置组件校验信息样式

:scope .wd-g-text-error {
    font-size: 20px;
    color: gray;
  }
提示文字.wd-rating-root .wd-form-item__help-text设置组件提示文字样式

:scope .wd-form-item__help-text {
    font-size: 20px;
    color: gray;
  }
评分组件.wd-rating
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-rating {
  /* 在这里编写CSS 样式 */
}
禁用态评分组件.wd-rating.is-disabled
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-rating.is-disabled {
  /* 在这里编写CSS 样式 */
}
禁用态评分组件.wd-rating.is-readonly
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-rating.is-readonly {
  /* 在这里编写CSS 样式 */
}
填充图标容器.wd-rating__full-icons-container填充图标元素们的父容器元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-rating__full-icons-container {
  /* 在这里编写CSS 样式 */
}
背景图标容器.wd-rating__empty-icons-container背景图标元素们的父容器元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-rating__empty-icons-container {
  /* 在这里编写CSS 样式 */
}
图标容器.wd-rating__icon-container图标元素的父容器元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-rating__icon-container {
  /* 在这里编写CSS 样式 */
}
图标.wd-rating__icon图标元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-rating__icon {
  /* 在这里编写CSS 样式 */
}

了解样式 API