问题现象: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写法)