工具集文档 - 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
结语

工具模块往往应用在边边角角,将不定期增加。

Layui - 用心与你沟通