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

Question

桌面模式图像

移动模式图片

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

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

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

我的来源：

<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>

Answer 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>

我可以用这个 link

做我想做的事

Answer 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

Answer 3

尝试从 <v-app-bar app> 中删除 app。我不知道为什么，但对我来说它很管用。

Answer 4

这些更改使它对我有用：

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

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

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

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

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

How to put navigation-drawer under app-bar for mobile in vuetify?

navigation-drawer

vue.js