当前位置 博文首页 > u012442504的专栏:layui选项卡不重复增加删除避免冲突的简单方

    u012442504的专栏:layui选项卡不重复增加删除避免冲突的简单方

    作者:[db:作者] 时间:2021-09-23 10:32

    本来想偷个懒,网上搜搜吧,然而,都是复制粘贴的内容,根本没有考虑实际场景和性能问题,冗长的代码、负责的逻辑,别说人了,就是机器都要费时间参与计算,最后导致卡卡卡。。。。

    哎,不说了,网上那些都啥也不是……

    开始上代码了:

    一、思路就是:将第一个固定,不参与选项卡计算,之后就好说了

     <div class="layui-tab" lay-filter="demo" lay-unauto lay-allowclose="true">
      <ul class="layui-tab-title">
        <li lay-id="indexsadmin" lay-attr="indexsadmin" class=""><i class="layui-icon layui-icon-home"></i>
        <i class="layui-icon layui-unselect layui-tab-close" style="display:none">?</i>
        </li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show"><iframe src="admin/indexs.html"></iframe></div>
      </div>
    </div>

    二、简洁明了,写代码思路很重要。

    var $ = layui.jquery,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
    
     var array = new Array();//选项卡数组
      function openadmin(content,id,title){      
          var ins = array.indexOf(id);     // 0
          if(ins!='-1'){
            //   element.tabChange('demo', id);//不推荐在if里面进行跳转选项卡
              
          } else{
               //新增一个Tab项
          element.tabAdd('demo', {
            title: title
            ,content: '<iframe src="'+"/admin"+content+'"></iframe>'
            ,id: id
          })
        uparr(id,1,0);
              
          }
          element.tabChange('demo', id);       
      }
    
      //选项卡新建
      element.on('tab(demo)', function(data){
          console.log($(this).attr('lay-id'))
      });
        
        //选项卡删除
        element.on('tabDelete(demo)', function(data){
          uparr(this.getAttribute("lay-id"),2,data.index);
          console.log(data.elem); //得到当前的Tab大容器
        });
    
     function uparr(data,is,index){
            //2=删除
            if(is==2){
                array.splice(index-1,1)
            }else if(is==1){
                //1=增加
                var ins = array.indexOf(data);     // 0
                if(ins=='-1'){
                     array.push(data)
                }           
                
            }
            
        }

    三、由于删除回调只会传下表,并不会传id,所以还是要根据下标来判断,幸亏下标是动态的。

    四、对了补充下,js中如果你是用的模块单独加载的,就用单独加载的方法引入element,如果是全局的就用全局的方法引入,文中的是全局方法,生产环境推荐全局加载方式,如果是调试环境推荐单独加载方式(可以定位具体的错误内容和信息)。

    五、本来想设置付费的,毕竟全网独此一份,高效、快捷,很有实战性,不过考虑到网上都是一些水文,还是公开吧,我为人人,人人为我的精神还是要发扬的!

    注:看了记得点个赞

    cs