rate 評分組件在電商和 O2O 平臺尤為常見(jiàn)，一般用于對商家進(jìn)行服務(wù)滿(mǎn)意度評價(jià)。外形依然小巧自然，功能依舊靈活實(shí)用。其中評分對應的自定義內容功能，可讓它有更多的發(fā)揮空間。該組件為 2.3.0 版本新增
模塊加載名稱(chēng)：rate
rate 組件可以用來(lái)進(jìn)行展示或評價(jià)，你只需要通過(guò)更改參數設定來(lái)開(kāi)啟你想要的功能，如下是一個(gè)最基本的例子：
<!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>
這真的就是個(gè)小例子，所以下文對組件的參數進(jìn)行了說(shuō)明，請仔細閱讀奧
目前 rate 組件提供了以下基礎參數，你可根據實(shí)際場(chǎng)景進(jìn)行相應的設置
| 參數選項 | 說(shuō)明 | 類(lèi)型 | 默認值 |
|---|---|---|---|
| elem | 指向容器選擇器 | string/object | - |
| length | 評分組件中具體星星的個(gè)數。個(gè)數當然是整數啦，殘缺的星星很可憐的，所以設置了小數點(diǎn)的組件我們會(huì )默認向下取整 | number | 5 |
| value | 評分的初始值 | number | 0 |
| theme | 主題顏色。我們默認的組件顏色是#FFB800，你可以根據自身喜好來(lái)更改組件的顏色，以適用不同場(chǎng)景 | string | #FFB800 |
| half | 設定組件是否可以選擇半星 | boolean | false |
| text | 是否顯示評分對應的內容 | boolean | false |
| readonly | 是否只讀，即只用于展示而不可點(diǎn) | boolean | false |
如若你設置分數，我們會(huì )根據你是否開(kāi)啟半星功能，來(lái)做一個(gè)具體的規范：
通過(guò) setText 函數，在組件初次渲染和點(diǎn)擊后時(shí)產(chǎn)生回調。我們默認文本以星級顯示，你可以根據自己設定的文字來(lái)替換我們的默認文本，如 “討厭” “喜歡” 。若用戶(hù)選擇分數而沒(méi)有設定對應文字的情況下，系統會(huì )使用我們的默認文本
rate.render({
elem: '#test1'
,setText: function(value){
var arrs = {
'1': '極差'
,'2': '差'
,'3': '中等'
,'4': '好'
};
this.span.text(arrs[value] || ( value + "星"));
}
});
當你點(diǎn)擊 3 星時(shí)，文本內容是中等，點(diǎn)擊 5 星時(shí)，由于沒(méi)有設定對應文字，所以文本會(huì )顯示 5 星
通過(guò) choose 實(shí)現函數，在組件被點(diǎn)擊后觸發(fā)，回調分數，用戶(hù)可根據分數來(lái)設置效果，比如出現彈出層
rate.render({
elem: '#test1'
,choose: function(value){
if(value > 4) alert( '么么噠' )
}
});
那么當你點(diǎn)擊 5 星或更高星級時(shí)，頁(yè)面就會(huì )彈出“么么噠”啦，你可根據相應需求在 choose 里完善你的代碼
評分組件非常簡(jiǎn)單，重點(diǎn)在于參數選項的設置，你可以前往示例頁(yè)面進(jìn)行更為直觀(guān)的了解。
layui - 在每一個(gè)細節中，用心與你溝通