知名网站建设官网/南宁网站建设公司

使用框架：
vue3，vant4

项目需求：
需要有一个浮动气泡，点击弹出导航菜单

遇到的问题：
1. 使用van-floating-bubble包裹van-popover，但点击后只会重复显示不能隐藏
2. popover位置固定，不能根据floating-bubble改变位置

解决：
1. 去掉popover绑定的v-model:show，改为使用show属性
2. 使用floating-bubble的offsetChange事件，获取当前的x和y，判断当前浮动气泡在什么位置，来修改popover的placement

代码：
template:

<!-- 磁吸导航 -->
<van-floating-bubble @offset-change="onOffsetChange" axis="xy" magnetic="x" icon="chat" @click.stop.prevent="showPopover = !showPopover"><van-icon class-prefix="ti" name="baseline-density-medium" size="24" /><van-popover :show="showPopover" :placement="popoverPlacement" :offset="[10, 40]" :show-arrow="false"@closed="showPopover=false"><ul><template v-for="item in childTabList" :key="item"><li>{{ item.name }}</li></template></ul></van-popover>
</van-floating-bubble>

javascript:
 

<script setup>
const showPopover = ref(false)
// 磁吸偏移量
const popoverPlacement = ref('left-end')
function onOffsetChange(offset) {const viewportWidth = window.innerWidth;const viewportHeight = window.innerHeight;const { x, y } = offset;const horizontalCenter = viewportWidth / 2;const verticalCenter = viewportHeight / 2;// 判断 x, y 来设置 Popover 的弹出位置if (y > verticalCenter) {// 靠近底部if (x > horizontalCenter) {// 气泡在屏幕右下角，Popover 向上弹出并靠右popoverPlacement.value = 'top-end';} else {// 气泡在屏幕左下角，Popover 向上弹出并靠左popoverPlacement.value = 'top-start';}} else {// 靠近顶部if (x > horizontalCenter) {// 气泡在屏幕右上角，Popover 向下弹出并靠右popoverPlacement.value = 'bottom-end';} else {// 气泡在屏幕左上角，Popover 向下弹出并靠左popoverPlacement.value = 'bottom-start';}}
}
</script>