所以,我有一个显示有徽标的按钮。当我悬停/单击按钮时,菜单打开,图标应该变成一个汉堡包。悬停部分工作正常,但我现在要做的是在菜单打开时保持汉堡包图标显示。
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>
谢谢你,谢谢你
1条答案
按热度按时间wfsdck301#
您可以在
v-menu
上使用v-model
指令来检查其状态。它在vuetify的文档中用代码解释。
https://vuetifyjs.com/en/components/menus/#popover-menu