[youzan/vant]van-tabs的active彩色高亮下划线的显示与overlay的问题 可任意简单复现 包含原因分析

2023-12-12 858 views
4
重现链接

https://gist.github.com/realpg/9631bc5b92f7ae1beaf07ad37a40481b

Vant 版本

4.7.3

描述一下你遇到的问题。

可以直接用默认组件直接布局直接复现 所以未提供代码片段

问题直观图: image

问题描述: 页面上放一个默认的vant的tabs组件,且开启了选中项彩色下划线

如果这时界面逻辑弹出一个overlay组件,则那个彩色的下划线不会被overlay遮挡

这里放任何其他非float的组件应该也有同样的问题

问题原因分析:

image

如图所示 这个下划线是 到dom上 .van-tabs__line 是一个absolute的div且z-index是1 他是float状态的 而overlay是类block布局的,填充纯色背景遮挡不住这个线

这应该是一个bug吧。overlay遮挡不住的元素。 或者换句话说,在页面基本布局结构里放了一个z-index是1的float元素,不应该这样设计吧

重现步骤

页面上放一个默认的vant的tabs组件,默认开启了选中项彩色下划线

如果这时界面逻辑弹出一个overlay组件,则那个彩色的下划线不会被overlay遮挡

设备/浏览器

任何设备 全平台

回答

4

不知道你理解的 float 和 block 是指什么。但这个现象和定位元素的层级有关系,你可以通过设置 overlay 的 z-index 解决这个问题。

1

按css说明z-index仅对position: relative | absolute | fixed生效 你总不能要求其他基本布局都做成这几种position吧

涉及在基本占位布局做了position: relative 带z-index的结构真的是正常的么?

5

默认的非定位布局也不会涉及到元素重叠的问题,你能碰到的这个问题,就是因为他们都是定位元素,所以需要通过 z-index 解决。如果有问题,问题也是默认的 z-index 值是否合理,而不是这样的结构是否正常。你也可以参考其它组件库的实现逻辑。

2

ok 按您说的 这个z-index是否合理呢?是不是bug呢 overlay比基本元素还在底层

6

它们的层级是一样的,所以最终它们展示上的层级和在文档流的顺序也有关系。修改默认的 z-index 值属于 breaking change。不过提供了 z-index 的 prop 和 css 变量,你可以根据项目的实际情况进行配置。

6

overlay 和 popup 不同,使用 overlay 的场景大部分是用户用于封装自己的组件,默认的 z-index 设置高了,也会和其余高的组件冲突,没有所谓的银弹,你觉得在这里合理了,在别的场景下可能就不合理了,所以应该由用户自己根据需要配置层级。

因为修改默认值属于 breaking change 了,现有的部分项目可能隐性的依赖了这个值,如果更改了,会出现更多层级上的冲突。