工具集文檔 - layui.util

                    我們將一些工具性元素放入 util 模塊中,以供選擇性使用。其內部由多個小工具組件組成,他們也許不是必須的,但很多時候卻能為你的頁面提供良好的輔助作用。
                    模塊加載名稱:util
                    固定塊

                    看到頁面右下角的那個包含top的bar了嗎?對,就是她。她通常會出現在那個固定位置,由兩個可選的bar和一個默認必選的TopBar組成。

                    語法:util.fixbar(options)
                    其中參數 options 是一個對象,可支持的key如下表:

                    參數 類型 描述
                    bar1 Boolean/String 默認false。如果值為true,則顯示第一個bar,帶有一個默認圖標。
                    如果值為圖標字符,則顯示第一個bar,并覆蓋默認圖標
                    bar2 Boolean/String 默認false。如果值為true,則顯示第二個bar,帶有一個默認圖標。
                    如果值為圖標字符,則顯示第二個bar,并覆蓋默認圖標
                    bgcolor String 自定義區塊背景色
                    showHeight Number 用于控制出現TOP按鈕的滾動條高度臨界值。默認:200
                    css Object 你可以通過重置bar的位置,比如 css: {right: 100, bottom: 100}
                    click Function 點擊bar的回調,函數返回一個type參數,用于區分bar類型。
                    支持的類型有:bar1、bar2、top
                    layui.use('util', function(){
                      var util = layui.util;
                      
                      //執行
                      util.fixbar({
                        bar1: true
                        ,click: function(type){
                          console.log(type);
                          if(type === 'bar1'){
                            alert('點擊了bar1')
                          }
                        }
                      });
                    });
                          
                    倒計時

                    這是一個精致的封裝,它并不負責 UI 元素的呈現,而僅僅只是返回倒計時的數據,這意味著你可以將它應用在任何倒計時相關的業務中。

                    語法:util.countdown(endTime, serverTime, callback)

                    參數 說明
                    endTime 結束時間戳或Date對象,如:4073558400000,或:new Date(2099,1,1).
                    serverTime 當前服務器時間戳或Date對象
                    callback 回調函數。如果倒計時尚在運行,則每一秒都會執行一次。并且返回三個參數: date(包含天/時/分/秒的對象)、 serverTime(當前服務器時間戳或Date對象), timer(計時器返回的ID值,用于clearTimeout)
                    <div id="test"></div>
                     
                    <script>
                    layui.use('util', function(){
                      var util = layui.util;
                      
                      //示例
                      var endTime = new Date(2099,1,1).getTime() //假設為結束日期
                      ,serverTime = new Date().getTime(); //假設為當前服務器時間,這里采用的是本地時間,實際使用一般是取服務端的
                       
                      util.countdown(endTime, serverTime, function(date, serverTime, timer){
                        var str = date[0] + '天' + date[1] + '時' +  date[2] + '分' + date[3] + '秒';
                        layui.$('#test').html('距離2099年1月1日還有:'+ str);
                      });
                    });
                    </script>
                          
                    其它方法
                    方法 說明
                    util.timeAgo(time, onlyDate) 某個時間在當前時間的多久前。
                    參數 time:即為某個時間的時間戳或日期對象
                    參數 onlyDate:是否在超過30天后,只返回日期字符,而不返回時分秒

                    如果在3分鐘以內,返回:剛剛
                    如果在30天以內,返回:若干分鐘前若干小時前若干天前,如:5分鐘前
                    如果在30天以上,返回:日期字符,如:2017-01-01
                    util.toDateString(time, format) 轉化時間戳或日期對象為日期格式字符
                    參數 time:可以是日期對象,也可以是毫秒數
                    參數 format:日期字符格式(默認:yyyy-MM-dd HH:mm:ss),可隨意定義,如:yyyy年MM月dd日
                    util.digit(num, length) 數字前置補零
                    參數 num:原始數字
                    參數 length:數字長度,如果原始數字長度小于 length,則前面補零,如:util.digit(7, 3) //007
                    util.escape(str) 轉義 xss 字符
                    參數 str:任意字符
                    util.event(attr, obj, eventType) 用于更好地批量處理事件。
                    參數 attr:綁定需要監聽事件的元素屬性
                    參數 obj:事件回調鏈
                    參數 eventType:事件類型(默認 click)

                    示例:
                    HTML:
                    <button class="layui-btn" lay-active="e1">事件1</button>
                    <button class="layui-btn" lay-active="e2">事件2</button>
                    <button class="layui-btn" lay-active="e3">事件3</button>
                     
                    JavaScript:
                    <script>
                    layui.use('util', function(){
                      var util = layui.util;
                      
                      //處理屬性 為 lay-active 的所有元素事件
                      util.event('lay-active', {
                        e1: function(){
                          alert('觸發了事件1');
                        }
                        ,e2: function(){
                          alert('觸發了事件2');
                        }
                        ,e3: function(){
                          alert('觸發了事件3');
                        }
                      });
                    });
                    </script>
                                
                    結語

                    工具模塊往往應用在邊邊角角,將不定期增加。

                    layui - 用心與你溝通

                    亚洲图色