快捷導(dǎo)航

Vant中Popover氣泡彈出框位置錯(cuò)亂問題解決

更新時(shí)間：2023年06月14日 11:00:50 作者：天問

這篇文章主要為大家介紹了Vant中Popover氣泡彈出框位置錯(cuò)亂問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

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

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: '選項(xiàng)一', icon: 'add-o' },
        { text: '選項(xiàng)二', icon: 'music-o' },
        { text: '選項(xiàng)三', 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>

二、位置錯(cuò)亂原因

如上圖所示，觸發(fā)元素（按鈕）正常情況下是跟隨文檔流布局，Popover 彈出層的位置會(huì)正常展示。但是如果設(shè)置了絕對(duì)定位 position: absolute;，脫離了文檔流，所以最后彈出的浮層卻在別的位置展示。

F12打開控制臺(tái)，審查元素發(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;
  }

完美解決，耐思 _

以上就是Vant中Popover氣泡彈出框位置錯(cuò)亂問題解決的詳細(xì)內(nèi)容，更多關(guān)于Vant Popover彈出框位置錯(cuò)亂的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: