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是并行的。