Vuetify：查找 v 菜单内容的宽度

Question

我正在尝试创建自定义 v 菜单。 内容部分是一个大型菜单面板，由 v-container、v-row 和 v-column 构建。 由于大型菜单面板相对较宽，我尝试添加一个将菜单按钮连接到面板的视觉指示器。 出于定位目的，我需要知道按钮和内容面板的宽度以及两者的绝对位置。 this.$refs.menuButton.$el.clientWidth返回正确的值，但this.$refs.menuPanel.$el.clientWidth返回零值。

我认为这与在单击菜单项之前面板不可见的事实有关？ 我将如何获得面板的宽度及其位置？ 下面的简化代码。 我尝试添加一个手表以在菜单打开时触发，但它也返回了零。

<v-menu offset-y open-on-hover>
    <template v-slot:activator="{ on, attrs }">
      <v-btn v-on="on" :ripple="false"ref="menuButton">MENU BUTTON TITLE</v-btn>
    </template>
    <v-container ref="menuPanel">
      <v-row>
        <v-col
          v-for="(item, index) in items" :key="index">
        </v-col>
      </v-row>
    </v-container>
</v-menu>

Answer 1

而不是找到菜单内容的宽度，你可以尝试使用 v-menu 的min-width / max-width和nudge-bottom属性来管理面板相对于按钮的位置和宽度 - https://vuetifyjs .com/en/api/v-menu/#props-min-width