<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 評分組件文檔 - 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 - 用心與你溝通

      亚洲图色