评分组件文档 - layui.rate

rate 评分组件在电商和 O2O 平台尤为常见,一般用于对商家进行服务满意度评价。rate 组件是 layui 团队新成员 @star1029 的第一款组件,外形依然小巧自然,功能依旧灵活实用。其中评分对应的自定义内容功能,可让它有更多的发挥空间。该组件为 2.3.0 版本新增

模块加载名称:rate

使用

rate 组件可以用来进行展示或评价,你只需要通过更改参数设定来开启你想要的功能,如下是一个最基本的例子:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>评分组件</title>
  6. <link rel="stylesheet" href="../src/css/layui.css">
  7. </head>
  8. <body>
  9. <div id="test1"></div>
  10. <script src="../src/layui.js"></script>
  11. <script>
  12. layui.use('rate', function(){
  13. var rate = layui.rate;
  14.  
  15. //渲染
  16. var ins1 = rate.render({
  17. elem: '#test1' //绑定元素
  18. });
  19. });
  20. </script>
  21. </body>
  22. </html>

这真的就是个小例子,所以下文对组件的参数进行了说明,请仔细阅读奥

基础参数

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

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

分数设置

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

关闭半星功能:

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

开启半星功能:

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

自定义文本的回调

通过 setText 函数,在组件初次渲染和点击后时产生回调。我们默认文本以星级显示,你可以根据自己设定的文字来替换我们的默认文本,如 “讨厌” “喜欢” 。若用户选择分数而没有设定对应文字的情况下,系统会使用我们的默认文本

  1. rate.render({
  2. elem: '#test1'
  3. ,setText: function(value){
  4. var arrs = {
  5. '1': '极差'
  6. ,'2': '差'
  7. ,'3': '中等'
  8. ,'4': '好'
  9. };
  10. this.span.text(arrs[value] || ( value + "星"));
  11. }
  12. });

当你点击 3 星时,文本内容是中等,点击 5 星时,由于没有设定对应文字,所以文本会显示 5 星

点击产生的回调

通过 choose 实现函数,在组件被点击后触发,回调分数,用户可根据分数来设置效果,比如出现弹出层

  1. rate.render({
  2. elem: '#test1'
  3. ,choose: function(value){
  4. if(value > 4) alert( '么么哒' )
  5. }
  6. });

那么当你点击 5 星或更高星级时,页面就会弹出“么么哒”啦,你可根据相应需求在 choose 里完善你的代码

结语

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

layui - 用心与你沟通