評分組件文檔 - layui.rate

                    rate 評分組件在電商和 O2O 平臺尤為常見,一般用于對商家進行服務滿意度評價。rate 組件是 layui 團隊新成員 @star1029 的第一款組件,外形依然小巧自然,功能依舊靈活實用。其中評分對應的自定義內容功能,可讓它有更多的發揮空間。該組件為 2.3.0 版本新增
                    模塊加載名稱:rate
                    使用

                    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 評分組件中具體星星的個數。個數當然是整數啦,殘缺的星星很可憐的,所以設置了小數點的組件我們會默認向下取整 number 5
                    value 評分的初始值 number 0
                    theme 主題顏色。我們默認的組件顏色是#FFB800,你可以根據自身喜好來更改組件的顏色,以適用不同場景 string #FFB800
                    half 設定組件是否可以選擇半星 boolean false
                    text 是否顯示評分對應的內容 boolean false
                    readonly 是否只讀,即只用于展示而不可點 boolean false
                    分數設置

                    如若你設置分數,我們會根據你是否開啟半星功能,來做一個具體的規范:

                    關閉半星功能:

                    • 小數值大于 0.5 :分數向上取整,如 3.6 分,則系統自動更改為 4 分
                    • 小數值小于等于 0.5 :分數向下取整,如 3.2 分,則系統自動更改為 3 分
                    • 如果在關閉半星功能的情況下開啟了文本,你會發現你的分數也相應的變成了整數

                    開啟半星功能:

                    • 不論你的小數值是 0.1 還是 0.9,都統一規劃為 0.5,在文本開啟的情況下,你可以看見你的分數并沒有發生變化

                    自定義文本的回調

                    通過 setText 函數,在組件初次渲染和點擊后時產生回調。我們默認文本以星級顯示,你可以根據自己設定的文字來替換我們的默認文本,如 “討厭” “喜歡” 。若用戶選擇分數而沒有設定對應文字的情況下,系統會使用我們的默認文本

                     
                    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 里完善你的代碼

                    結語

                    評分組件非常簡單,重點在于參數選項的設置,你可以前往示例頁面進行更為直觀的了解。

                    layui - 用心與你溝通

                    亚洲图色