vue.js - 虚拟化 : Why is the sidebar laying over the other element?

Question

我的侧边栏位于路由器 View 上方，但它应该“阻挡”空间。

在我的App.vue中有以下代码

<template>
    <v-app id="app">
        <v-container>
            <sidebar class="d-block"/>

            <router-view class="d-block"></router-view>
        </v-container>
    </v-app>
</template>

由于 Vuetify 的 d-block 类，我希望侧边栏不会覆盖。

侧边栏基本上是从原始API复制的

<template>
    <v-container>
        <v-navigation-drawer
        v-model="drawer"
        :color="color"
        :permanent="permanent"
        :app="app"
        dark
        >
            <v-list dense nav class="py-0">
                <v-list-item-content>
                    <v-list-item-title>Application</v-list-item-title>
                    <v-list-item-subtitle>Subtext</v-list-item-subtitle>
                </v-list-item-content>

                <v-divider></v-divider>

                <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-container>
</template>

Answer 1

我不熟悉d-block类，并且搜索 Vuetify 文档没有向我显示任何内容。我会摆脱它；你不需要d-block类使抽屉导航在打开时将内容推到一边。

话虽如此，我认为您不想将所有内容都包含在 <v-container> 中。就像你正在做的那样。尝试像这样构建您的应用程序代码:

<template>
  <v-app id="app">
    <sidebar />
    <v-content>
      <router-view />
    </v-content>
  </v-app>
</template>

并且不要包裹您的 <v-navigation-drawer>在<v-container> ， 任何一个。你想要这样的:

<template>
  <v-navigation-drawer
    v-model="drawer"
    permanent
    app
    dark
    color="primary"
  >
    // Contents
  </v-navigation-drawer>
</template>

然后，让您的 <router-view> 显示 View 使用<v-container> :

<template>
  <v-container class="fill-height" fluid>
    // View content
  </v-container>
</template>