Vuetify 如何正确获取v-menu内容面板的宽度与位置信息

问题原因 #

v-menu 默认会在未激活状态下将内容面板设置为 display: none 或者直接不挂载到DOM树中，此时元素没有实际布局，clientWidth、offsetWidth 等尺寸属性均会返回0。你监听菜单打开事件后依然获取到0，是因为菜单打开有过渡动画，打开事件触发时DOM还未完成渲染布局，浏览器还没计算出元素的实际尺寸。

解决方法 #

方法1：监听打开状态后等待渲染完成（推荐） #

给v-menu绑定双向绑定变量控制打开状态，状态变更为打开时，先通过 $nextTick 等待DOM更新，再通过 requestAnimationFrame 等待浏览器完成布局计算，此时即可获取到正确的尺寸和位置信息。

代码示例：

<v-menu 
  offset-y 
  open-on-hover
  v-model="menuOpen"
  @input="handleMenuOpenChange"
>
  <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>

逻辑代码：

export default {
  data() {
    return {
      menuOpen: false,
      items: [] // 你的菜单数据
    }
  },
  methods: {
    handleMenuOpenChange(isOpen) {
      if (!isOpen) return
      // 等待DOM更新完成
      this.$nextTick(() => {
        // 等待浏览器完成布局渲染
        requestAnimationFrame(() => {
          // 获取面板尺寸和位置，getBoundingClientRect可直接拿到宽高和绝对位置
          const panelInfo = this.$refs.menuPanel.$el.getBoundingClientRect()
          const panelWidth = panelInfo.width
          const panelLeft = panelInfo.left
          // 获取按钮尺寸和位置
          const buttonInfo = this.$refs.menuButton.$el.getBoundingClientRect()
          const buttonWidth = buttonInfo.width
          // 此处写入你的视觉指示器定位逻辑
        })
      })
    }
  }
}

方法2：提前渲染菜单面板（适用于需要提前获取尺寸的场景） #

如果需要在菜单打开前就获取到面板尺寸，可以给v-menu添加 eager 属性强制组件初始化时就渲染内容面板，再配合自定义CSS让隐藏的面板保留布局计算：

<v-menu 
  offset-y 
  open-on-hover
  v-model="menuOpen"
  eager
>
<!-- 其余内容不变 -->
</v-menu>

添加全局样式：

/* 让未激活的菜单内容保留布局，不显示在视口中 */
.v-menu__content:not(.v-menu__content--active) {
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px;
  top: 0;
}

配置后你可以在任意时机直接获取面板的尺寸和位置信息，无需等待菜单打开。

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