Vuetify - 导航抽屉空间间隙

Question

当导航抽屉关闭或打开时，它会根据它的高度在页面上创建一个很大的间隙。怎样才能避免呢？

在第二张图片中，在导航栏和 Create Post 组件之间可以清楚地看到抽屉占用了空间

<template>
  <v-app>
    <v-navigation-drawer clipped v-model="sideNav">
      <v-list>
        <v-list-item
          v-for="item in items"
          :key="item.title"
          @click="onClickMenuItem(item.title)"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar
      dark
      fixed
      class="default-layout__navbar"
      extended
      extension-height="3"
    >
      <v-app-bar-nav-icon
        @click.native.stop="sideNav = !sideNav"
        class="hidden-sm-and-up"
      >
      </v-app-bar-nav-icon>
      <v-toolbar-title>
        <router-link to="/" tag="span" style="cursor: pointer">
          Blog
        </router-link>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn
          v-for="item in items"
          :key="item.title"
          @click="onClickMenuItem(item.title)"
        >
          <v-icon left dark>{{ item.icon }}</v-icon>
          {{ item.title }}
        </v-btn>
      </v-toolbar-items>

      <v-spacer></v-spacer>
      <!-- <span class="nav-user" v-if="loggedInUser.token">{{
        loggedInUser.username
      }}</span> -->
    </v-app-bar>

    <v-content class="default-layout__main-content">
      <transition name="fade" mode="out-in">
        <router-view />
      </transition>
    </v-content>
  </v-app>
</template>

Answer 1

如果我理解这个问题，您正在寻找这样的布局。注意app 属性是如何在v-navigation-drawer 和app-bar 中使用的...

   <v-app>
        <v-navigation-drawer v-model="sideNav" app>
            <v-list>
                <v-list-item v-for="item in items" :key="item.title" @click="onClickMenuItem(item.title)">
                    <v-list-item-icon>
                        <v-icon v-text="item.icon"></v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title v-text="item.title"></v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-app-bar dark fixed app class="default-layout__navbar" extended extension-height="3">
            <v-app-bar-nav-icon @click.native.stop="sideNav = !sideNav" class="hidden-sm-and-up">
            </v-app-bar-nav-icon>
            <v-toolbar-title>
                <router-link to="/" tag="span" style="cursor: pointer"> Blog </router-link>
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items class="hidden-xs-only">
                <v-btn v-for="item in items" :key="item.title" @click="onClickMenuItem(item.title)">
                    <v-icon left dark>{{ item.icon }}</v-icon>
                    {{ item.title }}
                </v-btn>
            </v-toolbar-items>
            <v-spacer></v-spacer>
            <span class="nav-user"> username </span>
        </v-app-bar>
        <v-content class="default-layout__main-content">
            <transition name="fade" mode="out-in">
                <router-view />
            </transition>
        </v-content>
  </v-app>

演示：https://codeply.com/p/KNNSlNEmzM