完美解决vant浮动气泡+弹出菜单

使用框架：
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>