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 组件提供了以下基础参数，你可根据实际场景进行相应的设置
| 参数选项 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elem | 指向容器选择器 | string/object | - |
| length | 评分组件中具体星星的个数。个数当然是整数啦，残缺的星星很可怜的，所以设置了小数点的组件我们会默认向下取整 | number | 5 |
| value | 评分的初始值 | number | 0 |
| theme | 主题颜色。我们默认的组件颜色是#FFB800，你可以根据自身喜好来更改组件的颜色，以适用不同场景 | string | #FFB800 |
| half | 设定组件是否可以选择半星 | boolean | false |
| text | 是否显示评分对应的内容 | boolean | false |
| readonly | 是否只读，即只用于展示而不可点 | boolean | false |
如若你设置分数，我们会根据你是否开启半星功能，来做一个具体的规范：
通过 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 里完善你的代码
评分组件非常简单，重点在于参数选项的设置，你可以前往示例页面进行更为直观的了解。
layui - 在每一个细节中，用心与你沟通