Vant中Popover氣泡彈出框位置錯(cuò)亂問(wèn)題解決
正文
在使用 VantUI 開(kāi)發(fā) H5 應(yīng)用時(shí)，引入了 Popover 氣泡彈出框組件，其中彈出位置參數(shù)設(shè)置的是 placement="bottom-end"，但是最后 Popover 彈出層的位置出現(xiàn)了錯(cuò)亂，沒(méi)有在指定的位置展示。
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打開(kāi)控制臺(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ò)亂問(wèn)題解決的詳細(xì)內(nèi)容，更多關(guān)于Vant Popover彈出框位置錯(cuò)亂的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue2使用TailwindCSS方法及遇到問(wèn)題小結(jié)
Tailwind CSS是一個(gè)全新的、可定制的CSS框架,它提供了一系列的CSS類,用于構(gòu)建現(xiàn)代化的Web界面,這篇文章主要介紹了Vue2使用TailwindCSS方法及遇到問(wèn)題小結(jié),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue指令之v-for的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能
這篇文章主要為大家詳細(xì)介紹了vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程詳解
本文分步驟給大家介紹了基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2018-01-01
vue router 跳轉(zhuǎn)后回到頂部的實(shí)例
今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交,本文給大家展示效果圖和完整代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
Vue中生命周期包括多個(gè)階段,如created和mounted,每階段有特定鉤子函數(shù),生命周期與瀏覽器渲染過(guò)程密切相關(guān),了解這些可以優(yōu)化頁(yè)面渲染和數(shù)據(jù)處理,created階段適用于數(shù)據(jù)初始化,而mounted階段適合進(jìn)行DOM操作和頁(yè)面渲染后的處理2024-10-10
這篇文章主要給大家介紹了關(guān)于vue指令和插值的相關(guān)資料,大家應(yīng)該對(duì)指令和插值都不陌生,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue3.0+ts引入詳細(xì)步驟以及語(yǔ)法校驗(yàn)報(bào)錯(cuò)問(wèn)題解決辦法
Vue?3.0是一個(gè)非常流行的JavaScript框架,不僅易于學(xué)習(xí)和使用,而且可以與許多UI框架集成,下面這篇文章主要給大家介紹了關(guān)于vue3.0+ts引入詳細(xì)步驟以及語(yǔ)法校驗(yàn)報(bào)錯(cuò)問(wèn)題的解決辦法,需要的朋友可以參考下2024-01-01