Vue 3与Vuetify 3：显示v-chip时v-menu位置偏移问题

问题描述 #

1. v-menu嵌套在v-btn内，当datatable选中条目后，v-btn内显示带选中数量的v-chip，按钮被撑开导致v-menu位置偏移。
2. 尝试给图标元素设置id/class作为v-menu的锚点，却报错提示未找到对应元素。

解决方案 #

1. 固定v-btn宽度，避免尺寸变化

直接给v-btn设置固定宽度，确保按钮尺寸不会随v-chip的显示/隐藏改变，从根源上解决菜单偏移问题。

<template>
  <v-btn variant="plain" color="black" style="width: 180px;">
    <div class="d-flex align-center justify-between">
      <span>{{ title }}</span>
      <v-chip
        v-if="selectedModel.length"
        label
        size="small"
        color="blue"
        class="mx-1"
      >
        {{ selectedModel.length }}
      </v-chip>
    </div>
    <v-icon right> mdi-chevron-down </v-icon>

    <v-menu
      location="bottom center"
      activator="parent"
      :close-on-content-click="false"
    >
      <v-card width="350">
        <v-divider />
        <!-- DATATABLE COMPONENT -->
      </v-card>
    </v-menu>
  </v-btn>
</template>

2. 用Vue模板引用设置图标为锚点

之前报错是因为直接用id/class时，元素可能还没渲染完成。改用Vue的ref获取图标元素，确保菜单能正确找到锚点，同时锚点固定在图标上，按钮宽度变化不影响菜单位置。

<template>
  <v-btn variant="plain" color="black">
    <div class="d-flex align-center">
      {{ title }}
      <v-chip
        v-if="selectedModel.length"
        label
        size="small"
        color="blue"
        class="mx-1"
      >
        {{ selectedModel.length }}
      </v-chip>
    </div>
    <v-icon right ref="menuActivator"> mdi-chevron-down </v-icon>

    <v-menu
      location="bottom center"
      :activator="() => $refs.menuActivator"
      :close-on-content-click="false"
    >
      <v-card width="350">
        <v-divider />
        <!-- DATATABLE COMPONENT -->
      </v-card>
    </v-menu>
  </v-btn>
</template>

3. 分离菜单激活器与按钮

把菜单的激活图标从v-btn中抽出来，让锚点完全独立于按钮，彻底避免按钮尺寸变化对菜单位置的影响。

<template>
  <div class="d-flex align-center">
    <v-btn variant="plain" color="black">
      <div class="d-flex align-center">
        {{ title }}
        <v-chip
          v-if="selectedModel.length"
          label
          size="small"
          color="blue"
          class="mx-1"
        >
          {{ selectedModel.length }}
        </v-chip>
      </div>
    </v-btn>
    <v-icon ref="menuActivator" class="cursor-pointer text-black"> mdi-chevron-down </v-icon>

    <v-menu
      location="bottom center"
      :activator="() => $refs.menuActivator"
      :close-on-content-click="false"
    >
      <v-card width="350">
        <v-divider />
        <!-- DATATABLE COMPONENT -->
      </v-card>
    </v-menu>
  </div>
</template>

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