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