021-评分
1. rate評分組件在電商和O2O平臺尤為常見, 一般用于對商家進行服務滿意度評價。
2. 模塊加載名稱: rate。
3. 基礎參數
3.1. 目前rate組件提供了以下基礎參數, 你可根據實際場景進行相應的設置:
4. 分數設置
4.1. 關閉半星功能:
4.1.1. 小數值大于0.5, 分數向上取整, 如: 3.6分, 則系統自動更改為4分。
4.1.2. 小數值小于等于0.5, 分數向下取整, 如: 3.2分, 則系統自動更改為3分。
4.1.3. 如果在關閉半星功能的情況下開啟了文本, 你會發現你的分數也相應的變成了整數。
4.2. 開啟半星功能:
4.2.1. 不論你的小數值是0.1還是0.9, 都統一規劃為0.5, 在文本開啟的情況下, 你可以看見你的分數并沒有發生變化。
5. 自定義文本的回調
5.1. 通過setText函數, 在組件初次渲染和點擊后時產生回調。我們默認文本以星級顯示, 你可以根據自己設定的文字來替換我們的默認文本, 如: "討厭"、"喜歡" 。若用戶選擇分數而沒有設定對應文字的情況下, 系統會使用我們的默認文本。
<script type="text/javascript">layui.use(['rate'], function() {var rate = layui.rate;// 渲染rate.render({elem: '#test1' // 指向容器選擇器,setText: function(value){var arrs = {'1': '極差','2': '差','3': '一般','4': '中等','5': '好','6': '非常好','7': '非常非常好','8': '極好的','9': '極好極好的','10': '最好的'};this.span.text(arrs[value] || ( value + "星"));}});}); </script>6. 點擊產生的回調
6.1. 通過choose實現函數, 在組件被點擊后觸發, 回調分數, 用戶可根據分數來設置效果:
<script type="text/javascript">layui.use(['rate'], function() {var rate = layui.rate;// 渲染rate.render({elem: '#test1' // 指向容器選擇器,choose: function(value){if(value > 6) alert('么么噠');}});}); </script>7. 例子
7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>評分 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" type="text/javascript" src="layui/layui.js"></script></head><body><div id="test1"></div><script type="text/javascript">layui.use(['rate'], function() {var rate = layui.rate;// 渲染rate.render({elem: '#test1' // 指向容器選擇器,length: 10 // 評分組件中具體星星的個數,value: 6 // 評分的初始值,half: true // 設定組件是否可以選擇半星,text: true // 是否顯示評分對應的內容,choose: function(value){if(value > 6) alert('么么噠');},setText: function(value){var arrs = {'1': '極差','2': '差','3': '一般','4': '中等','5': '好','6': '非常好','7': '非常非常好','8': '極好的','9': '極好極好的','10': '最好的'};this.span.text(arrs[value] || ( value + "星"));}});}); </script></body> </html>7.2. 效果圖
總結
