当关闭或打开导航抽屉时,基于其高度在页面上会产生很大的间隙。如何避免这种情况?
在第二个图像中,在导航栏和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>
答案 0 :(得分: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>