vant兼容问题之van-popup组件在ios上出现重叠问题

最新推荐文章于 2025-09-11 00:48:11 发布

原创最新推荐文章于 2025-09-11 00:48:11 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

移动端专栏收录该内容

9 篇文章

订阅专栏

这篇博客探讨了在iOS设备上遇到van-popup组件显示重叠的问题，并提出了解决方案。通过在created和destroyed钩子中动态创建和移除挂载节点，以及自定义getContainer方法返回挂载的div，成功避免了组件重叠，确保了popup在底部正确显示。

van-popup组件在ios上出现重叠问题
利用更改挂载节点来解决此问题。

在这里插入图片描述

<van-popup v-model="pickerRuler" position="bottom" :get-container="$parent.getContainer">
    <div class="content">
    </div>	
</van-popup>

created(){
  this.popDivContainer = document.createElement('div');
  document.body.appendChild(this.popDivContainer);
},
destroyed(){
  document.body.removeChild(this.popDivContainer);
  console.log(this.popDivContainer,this.popDivContainer)
},
methods:{
  getContainer() {
    return  this.popDivContainer;
  },