Question

我正在尝试为Vue应用程序创建导航栏，我正在使用Vuetify，在大屏幕上有工具栏，在小屏幕上有打开导航抽屉的汉堡包图标。

它可以工作，但是抽屉前面有一个覆盖层，我无法更改页面。

代码如下：

<template>
  <div>
    <v-app-bar dark>
      <v-app-bar-nav-icon class="hidden-md-and-up" @click="sidebar = !sidebar"></v-app-bar-nav-icon>
      <v-navigation-drawer v-model="sidebar" app>
        <v-list>
          <v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path">{{item.title}}</v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-toolbar-title>Jobify</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn text v-for="item in menuItems" :key="item.title">
          <router-link :to="item.path">{{item.title}}</router-link>
        </v-btn>
      </v-toolbar-items>
    </v-app-bar>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      sidebar: false,
      menuItems: [
        { path: "/jobs", name: "jobs", title: "Jobs" },
        { path: "/companies", name: "companies", title: "Companies" },
        { path: "/jobs/new", name: "new-job", title: "Add job" }
      ]
    };
  }
};
</script>

<style>
</style>

只有我使用的Vuetify组件在这里，实际上App组件中有v-app。

Answer 1

尝试将hide-overlay道具添加到v-navigation-drawer组件中以隐藏叠加层：

 <v-navigation-drawer v-model="sidebar" app hide-overlay >

Vuetify覆盖层覆盖抽屉

1 个答案: