如何判断v-menu的展开状态？实现菜单展开时固定显示汉堡图标

我有一个显示logo的按钮，当hover或点击按钮打开v-menu时，图标需切换为汉堡图标。hover切换功能正常，现在希望菜单展开时保持汉堡图标显示。请问v-menu是否自带状态检查选项，还是需要自定义布尔值函数来判断菜单是否展开？

代码如下：

<v-menu bottom offset-y attach="#mainMenuButton">
    <template #activator="{ on, attrs }">
      <div v-bind="attrs" v-on="on" id="mainMenuButton">
        <main-menu-div>
          <template v-slot:element>
            <v-hover v-slot="{ hover }">
              <div class="d-flex justify-center align-center">
                <v-icon v-if="hover" size="14" color="white">{{ "$hamburgerMenu" }}</v-icon>
                <v-icon v-else size="16" color="white">{{ "$mainLogo" }}</v-icon>
              </div>
            </v-hover>
          </template>
        </main-menu-div>
      </div>
    </template>
    <v-card class="m-main-menu-panel d-flex flex-row">
      <div class="column" v-for="(column, idx) in mainMenuColumns" :key="'main-menu-column-' + idx">
        <div v-for="(section, index) in column" :key="'section-' + index" class="d-flex flex-column">
          <span class="d-flex align-center mb-2">
            {{ $t(title) }}
          </span>
        </div>
      </div>
    </v-card>
  </v-menu>

不需要自定义复杂的布尔值函数，v-menu自带状态绑定能力，通过v-model就能直接获取菜单的展开/收起状态，具体修改步骤如下：

1. 绑定菜单状态：给<v-menu>添加v-model="isMenuOpen"，用来追踪菜单是否展开
2. 修改图标判断条件：把图标的显示条件从hover改成hover || isMenuOpen，这样hover或菜单展开时都会显示汉堡图标
3. 初始化状态变量：在组件的data（Vue2）或setup（Vue3）里定义状态变量

修改后的完整代码 #

Vue2版本：

<template>
  <v-menu bottom offset-y attach="#mainMenuButton" v-model="isMenuOpen">
    <template #activator="{ on, attrs }">
      <div v-bind="attrs" v-on="on" id="mainMenuButton">
        <main-menu-div>
          <template v-slot:element>
            <v-hover v-slot="{ hover }">
              <div class="d-flex justify-center align-center">
                <v-icon v-if="hover || isMenuOpen" size="14" color="white">{{ "$hamburgerMenu" }}</v-icon>
                <v-icon v-else size="16" color="white">{{ "$mainLogo" }}</v-icon>
              </div>
            </v-hover>
          </template>
        </main-menu-div>
      </div>
    </template>
    <v-card class="m-main-menu-panel d-flex flex-row">
      <div class="column" v-for="(column, idx) in mainMenuColumns" :key="'main-menu-column-' + idx">
        <div v-for="(section, index) in column" :key="'section-' + index" class="d-flex flex-column">
          <span class="d-flex align-center mb-2">
            {{ $t(title) }}
          </span>
        </div>
      </div>
    </v-card>
  </v-menu>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false
    }
  }
}
</script>

Vue3版本：

<template>
  <v-menu bottom offset-y attach="#mainMenuButton" v-model="isMenuOpen">
    <template #activator="{ on, attrs }">
      <div v-bind="attrs" v-on="on" id="mainMenuButton">
        <main-menu-div>
          <template v-slot:element>
            <v-hover v-slot="{ hover }">
              <div class="d-flex justify-center align-center">
                <v-icon v-if="hover || isMenuOpen" size="14" color="white">{{ "$hamburgerMenu" }}</v-icon>
                <v-icon v-else size="16" color="white">{{ "$mainLogo" }}</v-icon>
              </div>
            </v-hover>
          </template>
        </main-menu-div>
      </div>
    </template>
    <v-card class="m-main-menu-panel d-flex flex-row">
      <div class="column" v-for="(column, idx) in mainMenuColumns" :key="'main-menu-column-' + idx">
        <div v-for="(section, index) in column" :key="'section-' + index" class="d-flex flex-column">
          <span class="d-flex align-center mb-2">
            {{ $t(title) }}
          </span>
        </div>
      </div>
    </v-card>
  </v-menu>
</template>

<script setup>
import { ref } from 'vue'
const isMenuOpen = ref(false)
</script>

修改完成后，菜单展开时会保持汉堡图标显示，hover切换的原有逻辑也不受影响。

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