vue.js - Vuetify v-menu 在对话框出现后使下拉菜单保持打开状态

Question

我有一个 v-menu，其中包含一个带有自定义组件的 v-list。

<v-toolbar class="transparent">
  <v-menu offset-y>
    <template v-slot:activator="{ on, attrs }">
      <v-btn v-bind="attrs" v-on="on">
        <span><v-icon>mdi-menu</v-icon></span>
      </v-btn>
    </template>
    <v-list>
      <AdminAgentList/>
    </v-list>
  </v-menu>
    ... more ...

该组件是一个对话框，它定义了一个 v-list-item 来插入 v-menu 中的 v-list。

<template>
  <div>  <!-- Agent List -->
    <v-dialog v-model="agentList_dlgOpen" persistent max-width="40%" @keydown.esc="agentList_dlgOpen = false">
      <template v-slot:activator="{ on, attrs }">
        <v-list-item v-bind="attrs" v-on="on">
          <v-list-item-title><v-icon>mdi-account-multiple</v-icon> Agent List</v-list-item-title>
        </v-list-item>
      </template>
      <v-card>
        <v-card-title>Agent List Maintenance</v-card-title>
        <v-card-text>
        ...

我遇到的问题是，当我单击下拉菜单项时，对话框会出现并且工作正常。关闭对话框后，我返回页面，但菜单项(“代理列表”下拉列表本身)仍然显示悬停在页面其余部分的上方。当我从下拉列表中选择某些内容后，如何使下拉列表消失？

Answer 1

问题是，如果列表项是激活器，那么它必须打开，直到对话框打开

我的解决方案是:

<v-menu offset-y v-model="menu">
  <template v-slot:activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">
      <span><v-icon>mdi-menu</v-icon></span>
    </v-btn>
  </template>
  <v-list>
    <AdminAgentList @close-menu="menu = false" />
  </v-list>
</v-menu>

将 v-model 添加到菜单并控制可见性 在另一个组件AdminAgentList中:

watch: {
  agentList_dlgOpen(val) {
    if (!val) {
      this.$emit("close-menu");
    }
  },
},

一个观察者来检查对话框是否关闭