-

评分组件文档 - layui.rate

rate 评分组件在电商和 O2O 平台尤为常见,一般用于对商家进行服务满意度评价。外形依然小巧自然,功能依旧灵活实用。其中评分对应的自定义内容功能,可让它有更多的发挥空间。该组件为 2.3.0 版本新增
模块加载名称:rate
引入layui全局类库
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.all.js" charset="utf-8"></script>
使用
基础效果--获取代码
显示文字--获取代码
半星效果--获取代码
自定义内容--获取代码
自定义长度--获取代码
只读--获取代码
点击回调事件--获取代码
自定义主题色--获取代码
基础参数

目前 rate 组件提供了以下基础参数,你可根据实际场景进行相应的设置

参数选项 说明 类型 默认值
elem 指向容器选择器 string/object -
length 评分组件中具体星星的个数。个数当然是整数啦,残缺的星星很可怜的,所以设置了小数点的组件我们会默认向下取整 number 5
value 评分的初始值 number 0
theme 主题颜色。我们默认的组件颜色是#FFB800,你可以根据自身喜好来更改组件的颜色,以适用不同场景 string #FFB800
half 设定组件是否可以选择半星 boolean false
text 是否显示评分对应的内容 boolean false
readonly 是否只读,即只用于展示而不可点 boolean false
分数设置

如若你设置分数,我们会根据你是否开启半星功能,来做一个具体的规范:

关闭半星功能:

  • 小数值大于 0.5 :分数向上取整,如 3.6 分,则系统自动更改为 4 分
  • 小数值小于等于 0.5 :分数向下取整,如 3.2 分,则系统自动更改为 3 分
  • 如果在关闭半星功能的情况下开启了文本,你会发现你的分数也相应的变成了整数

开启半星功能:

  • 不论你的小数值是 0.1 还是 0.9,都统一规划为 0.5,在文本开启的情况下,你可以看见你的分数并没有发生变化

结语

评分组件非常简单,重点在于参数选项的设置,你可以前往示例页面进行更为直观的了解。

layui - 在每一个细节中,用心与你沟通