Question

正在使用Vuetify，并且下拉菜单的子菜单有问题。除了单击子菜单项时不会关闭的主下拉菜单以外，其他所有操作均应按预期进行。子菜单将关闭。 1.点击打开下拉菜单 2.悬停时打开子菜单 3.如果单击主菜单项，则整个菜单将关闭。我希望它保持打开状态，因为我没有用于主菜单项的任何路由器链接，仅用于子菜单项。 4.如果单击子菜单项，则会转到新页面，但主菜单不会关闭，只会关闭子菜单。必须再次在下拉框之外单击以将其关闭。

我尝试过“点击关闭”和“内容点击关闭”，但没有成功。

<v-menu offset-y :close-on-select="true">
    <v-btn flat slot="activator">
      <v-icon left>expand_more</v-icon>
      <span>Our Adventures</span>
    </v-btn>
    <v-list class="py-0">
      <v-list-tile>
        <router-link to="/adventures">
          <v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
        </router-link>
      </v-list-tile>
    </v-list>
    <v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
      <v-menu offset-x right open-on-hover>
        <v-list-tile slot="activator">
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
        <v-list dense>
          <v-list-tile
            v-for="subItem in item.items"
            :key="subItem.title"
            @click="close"
            router
            :to="subItem.link"
          >
            <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-list>
  </v-menu>

和相关脚本

 items: [
    {
      title: "Nordic skating",
      items: [
        { title: "Open tour", link: "/adventures/skating/weekend" },
        { title: "Private tour", link: "/adventures/skating/private" }
      ]
    },
    {
      title: "Kayak",
      items: [
        { title: "Open tour", link: "/adventures/kayak/weekend" },
        { title: "Private tour", link: "/adventures/kayak/private" }
      ]
    },
    {
      title: "Hiking",
      items: [
        { title: "Open tour", link: "/adventures/hiking/eightdays" },
        { title: "Private tour", link: "/adventures/hiking/private" }
      ]
    },
    {
      title: "Cross country skiing",
      items: [
        { title: "Open tour", link: "/adventures/skiing/weekend" },
        { title: "Private tour", link: "/adventures/skiing/private" },
        {
          title: "Winter adventures",
          link: "/adventures/skiing/adventures"
        }
      ]
    }
  ],

Answer 1

您没有提到Vuetify版本，但我认为它是1.x。这是我在项目中所做的：

在顶级v-menu，close-on-content-click="true"中。默认情况下，此道具为true，因此您无需添加它。
内部v-menu将具有open-on-hover，而您的代码已经具有。
将slot =“ activator”移动到模板。
在内部v-menu的激活器上，我添加了@click.stop.prevent

因此，您的代码应如下所示：

<v-menu offset-y>
  <v-btn flat slot="activator">
    <v-icon left>expand_more</v-icon>
    <span>Our Adventures</span>
  </v-btn>
  <v-list class="py-0">
    <v-list-tile>
      <router-link to="/adventures">
        <v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
      </router-link>
    </v-list-tile>
  </v-list>
  <v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
    <v-menu offset-x right open-on-hover>
      <template slot="activator">
        <v-list-tile 
          @click.stop.prevent
        >
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
      <template>
      <v-list dense>
        <v-list-tile
          v-for="subItem in item.items"
          :key="subItem.title"
          @click="close"
          router
          :to="subItem.link"
        >
          <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
  </v-list>
</v-menu>

侧面说明：Vue 2.6中不推荐使用slot属性。请考虑使用v-slot指令。 https://vuejs.org/v2/guide/components-slots.html

Answer 2

删除“悬停打开”，它将按预期运行。鼠标悬停打开时，单击两次可关闭窗口。我有同样的问题，但没有成功。我建议您使用自定义菜单，而不要使用Vuetify菜单。

Answer 3

通过使用 ref 和 isActive 属性解决了 parentMenu 未关闭的问题。

步骤：

将 ref = "parentMenuRef" 添加到父 v-menu
在子菜单项中，添加 @click="$refs.parentMenuRef.isActive = false"

这将在单击 childMenu 项时关闭 parentMenu 和 childMenu。 Original answer

带有子菜单的vuetify下拉v菜单不会在选择时关闭

3 个答案: