vant的popup+picker在ios上的一个bug

场景描述

近期做了一个体检的项目，需求是需要先选择项目，然后去选择排班日期。也就是具有二次关联。

 

bug描述

在部分的ios上，第二次选择排版日期出现了蒙版样式没了。本来的效果是选择器各项具有模糊效果，只有选中的一项是100%高亮的。

 

排查问题

先是查看源码，怀疑源码有问题。初步排查下来，发现定位，css都没有问题。（css中模糊使用渐变处理的）

其次一个一个试，最后发现问题是因为dom突然间增加了一段导致的。

 

结果分析

1. 低版本的ios上dom的定位可能会不太准确

2. 出现这个问题也是因为vant的popup是挂载到使用的地方，不是添加到body下的。

 

解决办法

给popup添加个挂载节点，指定挂载到指定dom位置就好了。

 

源码

<van-popup v-model="showPicker" position="bottom" get-container="#popup"> <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" value-key="text" :title="{set:'选择体检套餐',shift:'选择体检日期'}[selectType]" /> </van-popup> <div id="app"></div> <div id="popup"></div>

popop是在index.html文件中增加的dom，跟app/root是并行的。