LayUI中的内置模块之评分组件文档 - layui.rate

最新推荐文章于 2024-05-21 15:43:31 发布

daimeijin

最新推荐文章于 2024-05-21 15:43:31 发布

阅读量741

点赞数 1

分类专栏： LayUI 文章标签： layui

本文链接：https://blog.csdn.net/daimeijin/article/details/119703835

版权

LayUI 专栏收录该内容

27 篇文章 4 订阅

订阅专栏

前言

最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。

评分组件文档

rate 评分组件在电商和 O2O 平台尤为常见，一般用于对商家进行服务满意度评价。外形依然小巧自然，功能依旧灵活实用。其中评分对应的自定义内容功能，可让它有更多的发挥空间。该组件为 2.3.0 版本新增
模块加载名称：rate

快速使用

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>评分组件</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
  <div id="test1"></div>
  <script src="../src/layui.js"></script>
  <script>
  layui.use('rate', function(){
    var rate = layui.rate;
   
    //渲染
    var ins1 = rate.render({
      elem: '#test1'  //绑定元素
    });
  });
  </script>
</body>
</html>

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

基础参数

目前 rate 组件提供了以下基础参数，你可根据实际场景进行相应的设置
在这里插入图片描述

分数设置

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

关闭半星功能:
小数值大于 0.5 ：分数向上取整，如 3.6 分，则系统自动更改为 4 分
小数值小于等于 0.5 ：分数向下取整，如 3.2 分，则系统自动更改为 3 分
如果在关闭半星功能的情况下开启了文本，你会发现你的分数也相应的变成了整数
开启半星功能:
不论你的小数值是 0.1 还是 0.9，都统一规划为 0.5，在文本开启的情况下，你可以看见你的分数并没有发生变化

自定义文本的回调

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

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

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

点击产生的回调

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

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

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

daimeijin

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
LayUI中的内置模块之评分组件文档 - layui.rate

前言最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。评分组件文档rate 评分组件在电商和 O2O 平台尤为常见，一般用于对商家进行服务满意度评价。外形依然小巧自然，功能依旧灵活实用。其中评分对应的自定义内容功能，可让它有更多的发挥空间。该组件为
复制链接

扫一扫