-

評(píng)分組件文檔 - layui.rate

rate 評(píng)分組件在電商和 O2O 平臺(tái)尤為常見，一般用于對(duì)商家進(jìn)行服務(wù)滿意度評(píng)價(jià)。外形依然小巧自然，功能依舊靈活實(shí)用。其中評(píng)分對(duì)應(yīng)的自定義內(nèi)容功能，可讓它有更多的發(fā)揮空間。該組件為 2.3.0 版本新增
模塊加載名稱：rate
使用

rate 組件可以用來進(jìn)行展示或評(píng)價(jià)，你只需要通過更改參數(shù)設(shè)定來開啟你想要的功能，如下是一個(gè)最基本的例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>評(píng)分組件</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è)小例子，所以下文對(duì)組件的參數(shù)進(jìn)行了說明，請(qǐng)仔細(xì)閱讀奧

基礎(chǔ)參數(shù)

目前 rate 組件提供了以下基礎(chǔ)參數(shù)，你可根據(jù)實(shí)際場(chǎng)景進(jìn)行相應(yīng)的設(shè)置

參數(shù)選項(xiàng) 說明 類型 默認(rèn)值
elem 指向容器選擇器 string/object -
length 評(píng)分組件中具體星星的個(gè)數(shù)。個(gè)數(shù)當(dāng)然是整數(shù)啦，殘缺的星星很可憐的，所以設(shè)置了小數(shù)點(diǎn)的組件我們會(huì)默認(rèn)向下取整 number 5
value 評(píng)分的初始值 number 0
theme 主題顏色。我們默認(rèn)的組件顏色是#FFB800，你可以根據(jù)自身喜好來更改組件的顏色，以適用不同場(chǎng)景 string #FFB800
half 設(shè)定組件是否可以選擇半星 boolean false
text 是否顯示評(píng)分對(duì)應(yīng)的內(nèi)容 boolean false
readonly 是否只讀，即只用于展示而不可點(diǎn) boolean false
分?jǐn)?shù)設(shè)置

如若你設(shè)置分?jǐn)?shù)，我們會(huì)根據(jù)你是否開啟半星功能，來做一個(gè)具體的規(guī)范：

關(guān)閉半星功能:

  • 小數(shù)值大于 0.5 ：分?jǐn)?shù)向上取整，如 3.6 分，則系統(tǒng)自動(dòng)更改為 4 分
  • 小數(shù)值小于等于 0.5 ：分?jǐn)?shù)向下取整，如 3.2 分，則系統(tǒng)自動(dòng)更改為 3 分
  • 如果在關(guān)閉半星功能的情況下開啟了文本，你會(huì)發(fā)現(xiàn)你的分?jǐn)?shù)也相應(yīng)的變成了整數(shù)

開啟半星功能:

  • 不論你的小數(shù)值是 0.1 還是 0.9，都統(tǒng)一規(guī)劃為 0.5，在文本開啟的情況下，你可以看見你的分?jǐn)?shù)并沒有發(fā)生變化
自定義文本的回調(diào)

通過 setText 函數(shù)，在組件初次渲染和點(diǎn)擊后時(shí)產(chǎn)生回調(diào)。我們默認(rèn)文本以星級(jí)顯示，你可以根據(jù)自己設(shè)定的文字來替換我們的默認(rèn)文本，如 “討厭” “喜歡” 。若用戶選擇分?jǐn)?shù)而沒有設(shè)定對(duì)應(yīng)文字的情況下，系統(tǒng)會(huì)使用我們的默認(rèn)文本

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

當(dāng)你點(diǎn)擊 3 星時(shí)，文本內(nèi)容是中等，點(diǎn)擊 5 星時(shí)，由于沒有設(shè)定對(duì)應(yīng)文字，所以文本會(huì)顯示 5 星

點(diǎn)擊產(chǎn)生的回調(diào)

通過 choose 實(shí)現(xiàn)函數(shù)，在組件被點(diǎn)擊后觸發(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)你點(diǎn)擊 5 星或更高星級(jí)時(shí)，頁面就會(huì)彈出“么么噠”啦，你可根據(jù)相應(yīng)需求在 choose 里完善你的代碼

結(jié)語

評(píng)分組件非常簡(jiǎn)單，重點(diǎn)在于參數(shù)選項(xiàng)的設(shè)置，你可以前往示例頁面進(jìn)行更為直觀的了解。

layui - 在每一個(gè)細(xì)節(jié)中，用心與你溝通