Question

我的老板决定用另一个子页面扩展菜单栏，以前完全可以正常工作的内容（一个简单的子菜单）现在不想工作了，因为它有一个子菜单，位于另一个子菜单下，菜单。这是图片：

如您所见，当我将鼠标悬停在“ Acts”上时，带有“外部”和“内部”文档的子菜单可以很好地工作

但是当我想用“导演指令”在另一个子菜单上移动光标时，整个菜单都隐藏了。我认为这是因为第二子菜单（孙代）没有将信息传递到主菜单元素（祖父母）来保持菜单处于活动状态，但是我不知道如何解决它。这是代码：

<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
      <template v-slot:activator="{ on }">
      <v-list-item link v-on="on">
        <v-list-item-content>
          <v-list-item-title class="subtitle-1">Acts <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      </template>
          <v-list color="#F0FAFE">
            <router-link to="/External"><v-list-item link>
              <v-list-item-content>
                <v-list-item-title class="subtitle-1 font-weight-medium">External</v-list-item-title>
              </v-list-item-content>
            </v-list-item></router-link>
            <v-menu open-on-hover bottom offset-x transition="slide-x-transition">
            <template v-slot:activator="{ on }">
            <v-list-item link v-on="on">
              <v-list-item-content>
                <v-list-item-title class="subtitle-1 font-weight-medium">Internal <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            </template>
              <v-list color="#F0FAFE">
                <v-menu open-on-hover bottom offset-x transition="slide-x-transition">
                <template v-slot:activator="{ on }">
                  <v-list-item link v-on="on">
                  <v-list-item-content>
                    <v-list-item-title class="subtitle-1 font-weight-medium">Director's Orders <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
                </template>
                  <v-list
                  color="#F0FAFE"
                  v-for="(item, index) in Orders"
                  :key="index"
                  >
                    <router-link :to="'/' + item.title"><v-list-item link>
                      <v-list-item-content>
                        <v-list-item-title class="subtitle-1 font-weight-medium">{{ item.title }}</v-list-item-title>
                      </v-list-item-content>
                    </v-list-item></router-link>
                  </v-list>
                </v-menu>
                <router-link to="/Other"><v-list-item link>
                  <v-list-item-content>
                    <v-list-item-title class="subtitle-1 font-weight-medium">Other</v-list-item-title>
                  </v-list-item-content>
                </v-list-item></router-link>
              </v-list>
            </v-menu>
          </v-list>
      </v-menu>

和免责声明。是的，我知道这种类型的菜单不是“材料设计”菜单，这是vuetify的基础

Answer 1

我不认为v菜单支持嵌套菜单（至少在通过鼠标悬停打开菜单时不支持）。

您必须使用嵌套的v悬停功能来制作自己的代码。您可以创建一个递归组件，以从嵌套的项数组构建菜单。

类似这样的东西：

<template>
  <v-list color="#F0FAFE" class="menu">
    <v-hover v-for="item in items" :key="item.title" v-slot="{ hover }">
      <router-link v-if="item.route" :to="item.route" class="item">
        <v-list-item link>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </router-link>
      <v-list-item v-else class="item">
        <v-list-item-content>
          <v-list-item-title>{{ item.title }} -&gt;</v-list-item-title>
        </v-list-item-content>

        <NestedMenu v-if="item.children && hover" :items="item.children"/>
      </v-list-item>
    </v-hover>
  </v-list>
</template>

<script>
export default {
  name: "NestedMenu",
  props: {
    items: { type: Array, default: () => [] }
  }
};
</script>

这是一个有效的示例（需要一些样式）：https://codesandbox.io/s/nestedmenu-u8tk1?file=/src/components/NestedMenu.vue

在App.vue的menuItems上添加更多项目和级别。

如何将属性从孙子菜单对象传递给祖父母？

1 个答案: