Layui选项卡tab组件在隐藏容器中即使没有溢出也被强制追加下拉属性的问题解决

发布：2023-06-16 16:21分类：前端模板评论：1浏览：460

出现该问题的版本号为：2.8.6 ~ 2.8.12。

当选项卡存在嵌套的情况时，如下代码：
``` html
<div class="layui-tab" lay-filter="hd1">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="1">AAA</li>
        <li lay-id="2">BBB</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">aaa</div>
        <div class="layui-tab-item">
            <div class="layui-tab" lay-filter="hd2">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="3">CCC</li>
                    <li lay-id="5">DDD</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">ccc</div>
                    <div class="layui-tab-item">ddd</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

![说明](/file/upload/image/20230617/648dcc3bb5101.gif)

这时被嵌套的选项卡是处于被隐藏的容器中，当切换到外层选项卡`BBB`时，会发现里面的选项卡`CCC`，`DDD`最右侧会被加上下拉的按钮（也就是选项卡宽度在没有溢出的情况下渲染时加了`overflow`属性）。

出现这类问题的原因在于源文件`element.js`中的：

``` js
// 大概在221行处：因为在样式.layui-tab .layui-tab-title li中并没有指定高度，
// 所以，当处于隐藏中的选项卡，这句获取的高度就会是 0，以至于整个条件会成立而追加下拉按钮
function(height){return height + height/2;}(title.find('li').eq(0).height())
```

解决的办法有两种：

1. 给`layui.css`相应处增加高度：
``` css
.layui-tab .layui-tab-title li{height:40px; ...}
```

2. 在源文件`element.js`中增加对处于隐藏中的选项卡跳出响应式：
``` js
$('.layui-tab').each(function(){
	var othis = $(this);
	if(!othis.is(":visible")) return true; // 这里是增加的，大概在195处
	...
});

//layui 2.9.15 开始在243行进行调整如下：
targetElem.each(function(){
	var othis = $(this);
	if(!othis.is(":visible")) return true;
```

最后重新打包。

```
npx gulp
```

layui tab

anna1 楼
2023-06-17 23:12

这都被发现了 ![image](http://img.baidu.com/hi/jx2/j_0017.gif)

1 回复 (0)

发布帖子

作者信息

: haohao; 等级：Lv2; 积分：3323; 这家伙很懒，什么都没写呢~

Layui选项卡tab组件在隐藏容器中即使没有溢出也被强制追加下拉属性的问题解决

发布：2023-06-16 16:21分类：前端模板评论：1浏览：460

作者信息

最近热帖