layui选项卡不重复增加删除避免冲突的简单方法,超实用-----网上的那些都是些啥,一个比一个复杂,啥也不是!

23 篇文章 0 订阅
7 篇文章 1 订阅

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

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

开始上代码了:

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

 <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,如果是全局的就用全局的方法引入,文中的是全局方法,生产环境推荐全局加载方式,如果是调试环境推荐单独加载方式(可以定位具体的错误内容和信息)。

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

注:看了记得点个赞

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值