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