如何在vuetify中将导航抽屉放在移动应用栏下？答案

【问题标题】：How to put navigation-drawer under app-bar for mobile in vuetify?如何在vuetify中将导航抽屉放在移动应用栏下？
【发布时间】：2021-02-06 15:54:17
【问题描述】：

桌面模式图片

移动模式图片

“剪辑”选项在桌面模式下工作正常。

但是，在移动模式下，菜单项被应用栏隐藏。（“仪表板”项已隐藏。）

即使在移动模式下，如何将导航抽屉放在应用栏下方？

我的来源：

<template>
  <v-app>
    <v-app-bar app color="primary" dark clipped-left>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Title</v-toolbar-title>
    </v-app-bar>

    <v-navigation-drawer app v-model="drawer" absolute clipped>
      <v-list nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main> </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  components: {},

  data: () => ({
    drawer: null,
    items: [
          { title: 'Dashboard', icon: 'mdi-view-dashboard' },
          { title: 'Photos', icon: 'mdi-image' },
          { title: 'About', icon: 'mdi-help-box' },
        ]
  }),
};
</script>

【问题讨论】：

如果你将 CSS 属性 style="display:block; 添加到 v-app-bar 和 v-navigation-drawer，它会改变什么吗？
@zerbene 谢谢，但它不起作用，结果相同。
这对您有帮助吗？ gist.github.com/oliverbth05/9834e9114b52b1f4ea77a0ae2d353e2f ，例如在 v-app-bar 和 v-navigation-drawer 之间添加 <v-spacer></v-spacer>
@zerbene 谢谢，正如你所说，我在 v-app-bar 和 v-navigation-drawer 之间添加了并对其进行了测试。但它不起作用，结果相同。

标签： vue.js navigation-drawer

【解决方案1】：

以下代码对我有用。

<v-app-bar app clipped-left>
  <v-app-bar-nav-icon v-if="!permanent" @click.stop="drawer = !drawer" />
  <v-toolbar-title v-text="title" />
</v-app-bar>
<v-navigation-drawer
  v-model="drawer"
  :permanent="permanent"
  expand-on-hover
  clipped
  app
>
...
</v-navigation-drawer>

我可以使用这个链接Vuetify 2 toolbar ans 1 navigation drawer with 1 toolbar above the navigation drawer做我想做的事

【讨论】：

【解决方案2】：

这对我有用。

<v-app id="inspire">
   <v-overlay
      :value="drawer"
      z-index="4"
    >
    </v-overlay>
    <v-navigation-drawer
      v-model="drawer"
      app
      clipped
      hide-overlay
      :style="{ top: $vuetify.application.top + 'px', zIndex: 4 }"
    >
    </v-navigation-drawer>

    <v-app-bar
      app
      clipped-left
      dark
      color="#447fa6"
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>
</v-app>

Codepen

【讨论】：

【解决方案3】：

尝试从<v-app-bar app> 中删除app。我不知道为什么，但对我来说它是有效的。

【讨论】：

【解决方案4】：

这些变化使它对我有用：

<v-app-bar :clipped-left="true" :clipped-right="true"></v-app-bar>

取决于您需要什么以及要添加导航抽屉的哪一侧

然后在导航抽屉中添加 clipped 属性

<v-navigation-drawer :clipped="true"></v-navigation-drawer>

【讨论】：