出现对话框后，Vuetify v-menu 使下拉菜单保持打开状态答案

【问题标题】：Vuetify v-menu leaves dropdown open after dialog appears出现对话框后，Vuetify v-menu 使下拉菜单保持打开状态
【发布时间】：2021-03-11 22:52:01
【问题描述】：

我有一个 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>
        ...

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

【问题讨论】：

标签： vue.js vuetify.js

【解决方案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");
    }
  },
},

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

【讨论】：

【解决方案2】：

试试这个。

<v-toolbar class="transparent">
  <v-menu   @input="onMenuToggle" open-on-hover v-model="isOpened" 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>

export default {
  data() {
    return {
      isOpened: false,
      selectedCategori: [],
      categori: {},
      overlay: false,
    };
  },
  methods: {
    onMenuToggle(val) {
      this.isOpened = val;
    },
  },
};
</script>

【讨论】：