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 | 评分组件中具体星星的个数。个数当然是整数啦,残缺的星星很可怜的,所以设置了小数点的组件layui会默认向下取整 | number | 5 |
value | 评分的初始值 | number | 0 |
theme | 主题颜色。layui默认的组件颜色是#FFB800,你可以根据自身喜好来更改组件的颜色,以适用不同场景 | string | #FFB800 |
half | 设定组件是否可以选择半星 | boolean | false |
text | 是否显示评分对应的内容 | boolean | false |
readonly | 是否只读,即只用于展示而不可点 | boolean | false |
如若你设置分数,layui会根据你是否开启半星功能,来做一个具体的规范:
关闭半星功能:
- 小数值大于 0.5 :分数向上取整,如 3.6 分,则系统自动更改为 4 分
- 小数值小于等于 0.5 :分数向下取整,如 3.2 分,则系统自动更改为 3 分
- 如果在关闭半星功能的情况下开启了文本,你会发现你的分数也相应的变成了整数
开启半星功能:
- 不论你的小数值是 0.1 还是 0.9,都统一规划为 0.5,在文本开启的情况下,你可以看见你的分数并没有发生变化
通过 setText 函数,在组件初次渲染和点击后时产生回调。layui默认文本以星级显示,你可以根据自己设定的文字来替换layui的默认文本,如 “讨厌” “喜欢” 。若用户选择分数而没有设定对应文字的情况下,系统会使用layui的默认文本
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 里完善你的代码