From 1026e9986adcc09e36354f48ee017fd4d47231de Mon Sep 17 00:00:00 2001 From: sight <26325820+Sight-wcg@users.noreply.github.com> Date: Mon, 18 Nov 2024 23:45:51 +0800 Subject: [PATCH] =?UTF-8?q?feat(tab):=20=E6=94=AF=E6=8C=81=E9=80=89?= =?UTF-8?q?=E9=A1=B9=E5=8D=A1=E6=BB=9A=E5=8A=A8=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/layui.css | 2 + src/modules/element.js | 119 +++++++++++++++++++++++++++++------------ 2 files changed, 88 insertions(+), 33 deletions(-) diff --git a/src/css/layui.css b/src/css/layui.css index a99ff456..3348d3c3 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -1384,6 +1384,8 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh .layui-tab-more li.layui-this:after{border-bottom-color: #eee; border-radius: 2px;} .layui-tab-more .layui-tab-bar .layui-icon{top: -2px; top: 3px\0; -webkit-transform: rotate(180deg); transform: rotate(180deg);} :root .layui-tab-more .layui-tab-bar .layui-icon{top: -2px\0/IE9;} +.layui-tab-scroll .layui-tab-bar{display: none;} +.layui-tab-border-bottom-container{border-bottom-color: #eee; border-bottom-width: 1px; border-style: none none solid; bottom: 0; left: 0; pointer-events: none; position: absolute; width: 100%; z-index: 9;} .layui-tab-content{padding: 15px 0;} diff --git a/src/modules/element.js b/src/modules/element.js index e5fe5b99..605a6a35 100644 --- a/src/modules/element.js +++ b/src/modules/element.js @@ -231,9 +231,6 @@ layui.define('jquery', function(exports){ // Tab 自适应 ,tabAuto: function(spread, elem){ - var SCROLL = 'layui-tab-scroll'; - var MORE = 'layui-tab-more'; - var BAR = 'layui-tab-bar'; var CLOSE = 'layui-tab-close'; var that = this; var targetElem = elem || $('.layui-tab'); @@ -241,9 +238,6 @@ layui.define('jquery', function(exports){ targetElem.each(function(){ var othis = $(this); var title = othis.children('.layui-tab-title'); - var item = othis.children('.layui-tab-content').children('.layui-tab-item'); - var STOPE = 'lay-stope="tabmore"'; - var span = $(''); if(that === window && device.ie != 8){ // call.hideTabMore(true) @@ -262,33 +256,11 @@ layui.define('jquery', function(exports){ }); } - if(typeof othis.attr('lay-unauto') === 'string') return; - - // 响应式 - if( - title.prop('scrollWidth') > title.outerWidth() + 1 || ( - title.find('li').length && title.height() > function(height){ - return height + height/2; - }(title.find('li').eq(0).height()) - ) - ){ - // 若执行是来自于切换，则自动展开 - ( - spread === 'change' && title.data('LAY_TAB_CHANGE') - ) && title.addClass(MORE); - - if(title.find('.'+BAR)[0]) return; - title.append(span); - othis.attr('overflow', ''); - - // 展开图标事件 - span.on('click', function(e){ - var isSpread = title.hasClass(MORE); - title[isSpread ? 'removeClass' : 'addClass'](MORE); - }); - } else { - title.find('.'+ BAR).remove(); - othis.removeAttr('overflow'); + // 当超出可用空间时，tab 是否应在多行之间换行，或者是否开启滚动模式 + if(typeof othis.attr('lay-nowrap') === 'string'){ + call.tabNoWrap(othis, spread); + }else{ + call.tabWrap(othis, spread); } }); } @@ -300,6 +272,87 @@ layui.define('jquery', function(exports){ tsbTitle.find('.layui-tab-bar').attr('title',''); } } + ,tabWrap: function(tabElem, spread){ + var tabElem = tabElem; + if(typeof tabElem.attr('lay-unauto') === 'string') return; + + var BAR = 'layui-tab-bar'; + var MORE = 'layui-tab-more'; + var STOPE = 'lay-stope="tabmore"'; + var titleElem = tabElem.children('.layui-tab-title'); + var checkOverflow = function(titleElem){ + if(titleElem.prop('scrollWidth') > titleElem.outerWidth() + 1) return true; + var titleItemsElem = titleElem.find('li'); + if(titleItemsElem.length){ + var titleFirstElHeight = titleItemsElem.eq(0).height(); + return titleElem.height() > titleFirstElHeight + titleFirstElHeight/2; + } + }(titleElem); + + if(checkOverflow){ + // 若执行是来自于切换，则自动展开 + if( spread === 'change' && titleElem.data('LAY_TAB_CHANGE')){ + titleElem.addClass(MORE) + } + if(titleElem.find('.'+BAR)[0]) return; + var span = $(''); + titleElem.append(span); + tabElem.attr('overflow', ''); + + // 展开图标事件 + span.on('click', function(e){ + var isSpread = titleElem.hasClass(MORE); + titleElem[isSpread ? 'removeClass' : 'addClass'](MORE); + }); + }else{ + titleElem.find('.'+ BAR).remove(); + tabElem.removeAttr('overflow'); + } + } + ,tabNoWrap: function(tabElem, spread){ + var tabElem = tabElem; + if(typeof tabElem.attr('lay-unauto') === 'string') return; + + var BAR = 'layui-tab-bar'; + var SCROLL = 'layui-tab-scroll'; + var STOPE = 'lay-stope="tabmore"'; + var BORDER_BOTTOM = 'layui-tab-border-bottom-container'; + var titleElem = tabElem.children('.layui-tab-title'); + var checkOverflow = titleElem.prop('scrollWidth') > titleElem.outerWidth() + 1; + var borderBottomPatch = titleElem.find('.' + BORDER_BOTTOM); + + // 添加底边框容器，并同步父容器宽度 + if(!borderBottomPatch[0]){ + borderBottomPatch = $('
'); + titleElem.append(borderBottomPatch); + } + titleElem.addClass(SCROLL); + + if(checkOverflow){ + borderBottomPatch.width(titleElem.prop('scrollWidth')); + if(titleElem.find('.'+BAR)[0])return; + var span = $(''); + titleElem.append(span); + tabElem.attr('overflow', ''); + + // 不使用 mousewheel，因为要支持滚轮滚动，触摸板，移动设备手势滑动(IE9+) + titleElem.off('wheel.lay_tab').on('wheel.lay_tab', function(e){ + e= e.originalEvent + var el = this; + e.preventDefault() + var direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY; + var distance = 30 * (direction > 0 ? 1 : -1); + var offset = el.scrollLeft + distance + el.scrollTo({ + left: offset, + }) + }) + }else{ + titleElem.find('.'+ BAR).remove(); + tabElem.removeAttr('overflow'); + borderBottomPatch.width('100%'); + } + } //点击一级菜单 /*