问题现象:van-cell的宽度被撑出屏幕宽度
今天做一个tab切换页面,偶然发现这个问题,记录一下。
问题背景:
前提是已经定了框架
vue3+vant4
那么做tab页面首先是用到了
van-tabs,然后很自然的给它加了animated属性(想让页面切换流畅一些),接下来是第一个tab页面中有个弹出层,在弹出层有个列表,自然是用到了van-popup和van-cell,最后问题就出现了,van-cell右侧文字不显示了,切换tab发现在第二个tab的右侧显示。
问题定位:transform属性会使position:fixed样式失效
van-tabs使用animated属性(该属性底层是使用transform样式),然而transform属性会使position:fixed样式失效,恰恰van-popup是position:fixed,因此导致该问题出现。
问题解决:
-
没有必要的话可以不使用
animated属性 -
如果必须用
animated属性,可以在van-popup上添加teleport="body"(注意:这是vant4写法)