Vue3中切换选中项时如何更新floating-vue下拉弹窗？

问题分析 #

连续点击不同项目时，Pinia store中的item直接从一个值切换到另一个值（未经过null状态），原逻辑未处理这种直接切换场景，导致弹窗被关闭后无法重新触发显示；同时close方法中调用hideAllPoppers()会强制关闭所有弹窗，干扰连续切换时的弹窗状态。

解决方案 #

1. 优化外部store监听逻辑 #

取消不必要的分支判断，只要新选中的项目存在，就直接更新弹窗位置并确保显示，无需先关闭再打开：

selectedItemCoords(newValue, oldValue) {
  if (this.$refs.infoPopup) {
    if (newValue) {
      const pixelCoords = this.getPixelPositionOfItem()
      // 先确保弹窗处于显示状态，再更新位置
      this.$refs.infoPopup.show();
      this.$refs.infoPopup.setPosition(pixelCoords);
    } else {
      this.$refs.infoPopup.close();
    }
  } else {
    console.log("Info Popup not found")
  }
}

2. 调整弹窗组件内部逻辑 #

• 移除close方法中的hideAllPoppers()，避免误关闭弹窗
• 添加对Pinia中item的监听，自动处理弹窗显示/更新逻辑
• 用nextTick确保DOM更新后再触发popper位置重计算

修改后的组件代码：

<template>
  <div
    id="popup-anchor"
    ref="anchor"
    class="w-1 h-1 "
    :style="{ position: 'absolute'}"
  >
    <Dropdown
      :shown="showPopup"
      :distance="1"
      :triggers="[]"
      :popper-triggers="[]"
    >
      <template #popper>
        <div
          v-if="item"
          :item="item"
          @share="share"
        >
          {{ item.text }}
        </div>
        <div
          v-else
          class="loading-text"
        >
          Loading...
        </div>
      </template>
    </Dropdown>
  </div>
</template>

<script>
import { ref, computed, watch, nextTick } from 'vue';
import {Dropdown, recomputeAllPoppers} from 'floating-vue';
import { useStore} from "@/store/store";

export default {
  components: {
    Dropdown,
  },
  props: {
    position: {
      type: Object,
      required: true,
      default: () => ({ top: '0px', left: '0px' }),
    },
  },
  setup(props, { expose }) {
    const anchor = ref(null);
    const showPopup = ref(false); 
    const storage = useStore();
    const item = computed(() => storage.item);

    // 监听item变化，自动处理弹窗显示和位置更新
    watch(item, (newItem) => {
      if (newItem) {
        showPopup.value = true;
        nextTick(() => {
          recomputeAllPoppers();
        });
      } else {
        showPopup.value = false;
      }
    }, { immediate: true });

    const show = () => {
      showPopup.value = true;
      nextTick(() => {
        recomputeAllPoppers();
      });
    };
    const close = () => {
      showPopup.value = false;
    };
    const setPosition = (pixelCoords) => {
      if (anchor.value) {
        anchor.value.style.top = `${pixelCoords[1]}px`;
        anchor.value.style.left =`${pixelCoords[0]}px`;
        nextTick(() => {
          recomputeAllPoppers();
        });
      }
    };

    const share = () => {
      console.log('share')
    };

    expose({ anchor, show, close , setPosition});

    return {
      anchor,
      show,
      close,
      share,
      showPopup,
      item,
    };
  },
};
</script>

3. 关键优化点说明 #

• 顺序调整：先激活弹窗再更新锚点位置，避免floating-vue因弹窗未激活而忽略位置变化
• 移除全局关闭：改用showPopup状态单独控制当前弹窗，避免连续切换时的冲突
• nextTick使用：确保DOM更新完成后再计算popper位置，保证坐标准确
• 内部监听item：组件内直接处理状态变化，减少外部调用依赖，逻辑更内聚

内容的提问来源于stack exchange，提问作者FChris