在使用 VantUI 開發(fā) H5 應用時，引入了 Popover 氣泡彈出框組件，其中彈出位置參數(shù)設置的是 placement="bottom-end"，但是最后 Popover 彈出層的位置出現(xiàn)了錯亂，沒有在指定的位置展示。

Vant && Popover

一、代碼展示

<template>
  <div class="head-nav">
    <van-icon size="24"
              class="nav-icon-left"
              name="arrow-left"
              color="#333" />
    <van-popover :offset="[14,10]"  
                 v-model="showPopover"
                 trigger="click"
                 :actions="actions"
                 @select="selectMenu"
                 get-container=".head-nav"
                 placement="bottom-end" >
      <template #reference>
        <van-icon size="24"
                  class="nav-icon-right"
                  name="ellipsis"
                  color="#333" />
      </template>
    </van-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false,
      actions: [
        { text: '選項一', icon: 'add-o' },
        { text: '選項二', icon: 'music-o' },
        { text: '選項三', icon: 'more-o' },
      ],
    }
  },
  methods: {
    selectMenu(action, index) {
      console.log(action, index)
    },
  },
}
</script>

<style lang="scss">
  .head-nav {
    width: 100%;
    height: 80px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
  }
  
  .nav-icon-left {
    position: absolute;
    left: 30px;
    top: 20px;
  }
  
  .nav-icon-right {
    position: absolute;
    right: 30px;
    top: 20px;
  }
  
</style>

二、位置錯亂原因

如上圖所示，觸發(fā)元素（按鈕）正常情況下是跟隨文檔流布局，Popover 彈出層的位置會正常展示。但是如果設置了 絕對定位 position: absolute;，脫離了文檔流，所以最后彈出的浮層卻在別的位置展示。
F12打開控制臺，審查元素發(fā)現(xiàn)觸發(fā)元素外層包裹的 .van-popover__wrapper 寬高為 0x0 ，位置也和內(nèi)部元素不在一起。

三、解決辦法

去掉觸發(fā)元素（按鈕）的定位，將定位加到 .van-popover__wrapper 包裹元素上。修改樣式，如下：

  .nav-icon-right {
    /*position: absolute;*/
    /*right: 30px;*/
    /*top: 20px;*/
  }
  .van-popover__wrapper {
    position: absolute;
    right: 30px;
    top: 20px;
  }

完美解決，耐思 ^_

歡迎訪問：天問博客