vue.js 如何检查是否显示v菜单

kh212irz  于 2022-11-30  发布在  Vue.js
关注(0)|答案(1)|浏览(199)

所以,我有一个显示有徽标的按钮。当我悬停/单击按钮时,菜单打开,图标应该变成一个汉堡包。悬停部分工作正常,但我现在要做的是在菜单打开时保持汉堡包图标显示。
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>

谢谢你,谢谢你

wfsdck30

wfsdck301#

您可以在v-menu上使用v-model指令来检查其状态。
它在vuetify的文档中用代码解释。
https://vuetifyjs.com/en/components/menus/#popover-menu

相关问题