layui tab关闭前实现监听

layui-v2.5.7

需求

layui tab 删除的时候判断是否可以执行删除

解决思路

添加新tab 的时候：

1. 解绑layui 自动生成的 tab 删除事件
2. 绑定自定义的 这个tab的删除事件

   

自定义事件内完成监听，满足条件则调用删除tab

代码如下

/*
* 添加 tab
*/
function tabAdd() {
    var tabId = new Date().getTime()
    layui.element.tabAdd('formTab', {
        title: '标题',
        content: '<div>内容</div>',
        id: tabId //实际使用一般是规定好的id，这里以时间戳模拟下
    })
    layui.element.tabChange('formTab', tabId);//切换到当前tab
    layui.element.render("formTab");
    
    //增加点击关闭事件
    var r = $(".layui-tab-title").find("li");
    let close = r.eq(r.length - 1).children("i")
    close.unbind('click') // 解除layui 自动绑定的删除
    //每次新打开tab都是最后一个，所以只对最后一个tab添加点击关闭事件
    close.on("click", function () {
        // 监听的内容  判断是否需要删除tab 
        if(tabId){
        // 不执行删除tab的操作
        } else {
            layui.element.tabDelete('formTab', tabId);
        }
    })
}

<div class="layui-tab" id="regist" lay-filter="regist" lay-allowclose="true">
    <ul class="layui-tab-title">
    </ul>
    <div class="layui-tab-content">
    </div>
</div>