在使用 VantUI 开发 H5 应用时，引入了 Popover 气泡弹出框组件，其中弹出位置参数设置的是 placement="bottom-end"，但是最后 Popover 弹出层的位置出现了错乱，没有在指定的位置展示。
一、代码展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <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>
|
二、位置错乱原因
如上图所示，触发元素（按钮）正常情况下是跟随文档流布局，Popover 弹出层的位置会正常展示。但是如果设置了 绝对定位 position: absolute;，脱离了文档流，所以最后弹出的浮层却在别的位置展示。
F12打开控制台，审查元素发现触发元素外层包裹的 .van-popover__wrapper 宽高为 0x0 ，位置也和内部元素不在一起。
三、解决办法
去掉触发元素（按钮）的定位，将定位加到 .van-popover__wrapper 包裹元素上。修改样式，如下：
1
2
3
4
5
6
7
8
9
10
| .nav-icon-right {
}
.van-popover__wrapper {
position: absolute;
right: 30px;
top: 20px;
}
|
完美解决，耐思 ^_^
欢迎访问：天问博客
