From b3e3c4e7b01cc7be4a886a94dbf93cf952c167b6 Mon Sep 17 00:00:00 2001
From: sight <26325820+Sight-wcg@users.noreply.github.com>
Date: Wed, 20 Nov 2024 13:44:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(tab):=20=E9=87=8D=E5=91=BD=E5=90=8D=20`lay?=
=?UTF-8?q?-nowrap`=20->=20`lay-scrollable`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/css/layui.css | 2 +-
src/modules/element.js | 77 ++++++++++++++++++++----------------------
2 files changed, 37 insertions(+), 42 deletions(-)
diff --git a/src/css/layui.css b/src/css/layui.css
index 31f4c236..0c30c144 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -1384,6 +1384,7 @@ 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{overflow: hidden;}
.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;}
@@ -1395,7 +1396,6 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
/* Tab 简洁风格 */.layui-tab-brief > .layui-tab-title .layui-this{color: #16baaa;}
.layui-tab-brief > .layui-tab-title .layui-this:after
,.layui-tab-brief > .layui-tab-more li.layui-this:after{border: none; border-radius: 0; border-bottom: 2px solid #16b777;}
-.layui-tab-brief[overflow] > .layui-tab-title .layui-this:after{top: 0px;}
/* Tab 卡片风格 */.layui-tab-card{border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.layui-tab-card > .layui-tab-title{background-color: #fafafa;}
diff --git a/src/modules/element.js b/src/modules/element.js
index 6c0fb372..4d46f6f2 100644
--- a/src/modules/element.js
+++ b/src/modules/element.js
@@ -265,8 +265,9 @@ layui.define('jquery', function(exports){
}
// 当超出可用空间时，tab 是否应在多行之间换行，或者是否开启滚动模式
- if(typeof othis.attr('lay-nowrap') === 'string'){
- call.tabNoWrap(othis, spread);
+ var scrollTarget = othis.attr('lay-scrollable');
+ if(typeof scrollTarget === 'string'){
+ call.tabNoWrap(othis, scrollTarget);
}else{
call.tabWrap(othis, spread);
}
@@ -317,7 +318,7 @@ layui.define('jquery', function(exports){
tabElem.removeAttr('overflow');
}
}
- ,tabNoWrap: function(tabElem, spread){
+ ,tabNoWrap: function(tabElem, scrollTarget){
var tabElem = tabElem;
if(typeof tabElem.attr('lay-unauto') === 'string') return;
@@ -326,56 +327,50 @@ layui.define('jquery', function(exports){
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 overflowElem = scrollTarget ? $(scrollTarget) : titleElem;
var borderBottomPatch = titleElem.find('.' + BORDER_BOTTOM);
- // 添加底边框容器，并同步父容器宽度
+ // 添加底边框容器补丁，并同步父容器宽度
if(!borderBottomPatch[0]){
borderBottomPatch = $('');
titleElem.append(borderBottomPatch);
}
- titleElem.addClass(SCROLL);
- call.tabUpdateShadowHelper(tabElem, titleElem);
+ borderBottomPatch.width('100%').width(titleElem.prop('scrollWidth'));
+ call.tabUpdateShadowHelper(overflowElem);
- if(checkOverflow){
- // TODO 计算所有选项卡宽度之和，以规避 float 带来的瑕疵？
- borderBottomPatch.width('100%');
- borderBottomPatch.width(titleElem.prop('scrollWidth'));
- if(titleElem.find('.'+BAR)[0])return;
+ if(titleElem.find('.'+BAR)[0])return;
- var span = $('');
- titleElem.append(span);
- tabElem.attr('overflow', '');
+ var barElem = $('');
+ titleElem.append(barElem);
+ overflowElem.addClass(SCROLL);
- titleElem.off('.lay_tab').on(tabWheelEvents, function(e){
- e.preventDefault();
- e= e.originalEvent;
- var el = $(this);
- var direction = 0;
+ overflowElem.off('.lay_tab').on(tabWheelEvents, function(e){
+ e.preventDefault();
+ e= e.originalEvent;
+ var el = $(this);
+ var direction = 0;
- // IE9+，chrome 和 firefox 同时添加 'wheel' 和 'mousewheel' 事件时，只执行 'wheel' 事件
- if(e.type === 'wheel'){
- direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
- }else if(e.type === 'mousewheel' ){
- direction = -e.wheelDelta;
- }else if(e.type === 'DOMMouseScroll'){
- direction = e.detail;
- }
- var distance = 30 * (direction > 0 ? 1 : -1);
- el.scrollLeft(el.scrollLeft() + distance);
- call.tabUpdateShadowHelper(tabElem, el);
- })
- }else{
- titleElem.find('.'+ BAR).remove();
- tabElem.removeAttr('overflow');
- borderBottomPatch.width('100%');
- }
+ // IE9+，chrome 和 firefox 同时添加 'wheel' 和 'mousewheel' 事件时，只执行 'wheel' 事件
+ if(e.type === 'wheel'){
+ direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+ }else if(e.type === 'mousewheel' ){
+ direction = -e.wheelDelta;
+ }else if(e.type === 'DOMMouseScroll'){
+ direction = e.detail;
+ }
+ var distance = 30 * (direction > 0 ? 1 : -1);
+ el.scrollLeft(el.scrollLeft() + distance);
+ call.tabUpdateShadowHelper(el);
+ });
}
- ,tabUpdateShadowHelper: function(targetEl, scrollEl){
- var scrollLeft = scrollEl.scrollLeft();
+ ,tabUpdateShadowHelper: function(overflowElem){
+ // 始终添加到剪切元素的父元素
+ var targetElem = overflowElem.parent();
+
+ var scrollLeft = overflowElem.scrollLeft();
// 阴影 helper 类
- targetEl.toggleClass('layui-tab-has-start-shadow', scrollLeft > 0);
- targetEl.toggleClass('layui-tab-has-end-shadow', scrollLeft < scrollEl.prop('scrollWidth') - scrollEl.outerWidth() - 1);
+ targetElem.toggleClass('layui-tab-has-start-shadow', scrollLeft > 0);
+ targetElem.toggleClass('layui-tab-has-end-shadow', scrollLeft < overflowElem.prop('scrollWidth') - overflowElem.outerWidth() - 1);
}
//点击一级菜单