layui lay-active 实现button click点击事件

已有的解决方案

• 1. js实现

HTML:

<button class="layui-icon layui-icon-export" id="withExport"></button>

JS:

$(document).on('click',"#withExport",function(){
        layer.msg("按钮点击");
 });

缺点：
难以传递参数。

• 2. jQuery实现

JS:

$("#withExport").click(function(){
    layer.msg("点击事件");
});

lay-active实现

在layui官方文档中，button的文档中都没有介绍任何监听方法。而在文档的工具模块示例中找到了lay-active方法。
原文是批量处理事件中运用了该方法。

HTML:

<div class="layui-btn-container">
  <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>
</div>

JS:

  //处理属性 为 lay-active 的所有元素事件
  util.event('lay-active', {
    e1: function(){
      layer.msg('触发了事件1');
    }
    ,e2: function(){
      layer.msg('触发了事件2');
    }
    ,e3: function(){
      layer.msg('触发了事件3');
    }
  });

通过util.event可以监听到所有lay-active的button点击事件。

传递参数

但是问题在于，原生方法仍然不能传递参数，不过，可以采用偷鸡的方法获得。

由文档可知，event方法有3个参数，不过这三个参数在这里没啥用。关键在于function的回调函数参数（othis）。othis为button的obj。

console.log(othis);
在context中，有一个dataset属性。其中存放的就是button中data-*的内容。

如：

<button class="layui-btn" lay-active="e1" data-id=1>事件1</button>

如果需要动态注入的话，laytpl模板是非常有效的。如：

<button class="layui-btn" lay-active="e2" data-id={{id}}>事件2</button>

laytpl详见文档。
现在则可以通过othis.context.dataset.id获得参数了。

  util.event('lay-active', {
    e1: function(othis){
      id = othis.context.dataset.id;
      layer.msg('触发了事件1:'+id);
    }
  });

至此，完全通过layui实现了<button>的onclick方法。