vant弹出层popup无法挂载到指定节点

qq_43222063

于 2024-04-25 15:53:37 发布

阅读量1.8k

点赞数 4

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_43222063/article/details/138191124

版权

文章讲述了在使用vant的popup组件时，如何确保它仅在特定div内显示并解决定位问题。作者提到使用get-container属性指定挂载位置后，发现默认样式不合适，需要修改overlay-style和position属性以实现预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用vant的popup组件时，希望其只显示在某个div中，否则连标题栏也遮盖住了，使用vant自带的属性，发现并不生效。

<!-- 通过函数指定挂载位置 -->
<van-popup v-model="show" :get-container="getContainer" />

 methods: {
    // 返回一个特定的 DOM 节点，作为挂载的父节点
    getContainer() {
      return document.querySelector('.my-container');
    },
  },

通过控制台可以看出，popup已经挂载上去了，但popup的样式为position:fixed，这显然不合理，

页面也没有达到期望的效果。

解决办法，只能自己修改样式了

 <van-popup
      v-model="show"
      :get-container="getContainer"
      :overlay-style="overlayStyle"
      style="position: absolute;"
      round
      position="top"
    >

此时，popup内容的位置已经正常，但遮罩层位置还不对，用下组件自带的方法，完整代码如下

 <van-popup
      v-model="show"
      :get-container="getContainer"
      :overlay-style="overlayStyle"
      style="position: absolute;"
      round
      position="top"
    >

 data() {
    return {
      overlayStyle:{
        position:'absolute'
      },
}}
 methods: {
    getContainer() {
       return document.querySelector('.my-container');
    },
}