v-navigation-drawer 和 v-app-bar 不能按预期工作

Question

我制作了一个简单的应用栏和导航抽屉页面。但是我的v-navigation-drawer组件似乎没有放在我的v-app-bar组件下。官方 vuetify文档上的v-app组件清楚地表明，这不应该是这样的（应该如何）。

我的目标是使用官方布局，因为它比我现在拥有的更漂亮。我已经尝试在v-app-bar和v-navigation-drawer组件上使用大量道具，但我似乎无法让它工作。

编辑：我的代码作为component主加载App.vue

我目前的代码：

<template>
  <div>
    <v-app-bar app clipped-leftS flat dark>
      <v-toolbar-title>
        <span class="first-word font uppercase">hi</span>
        <span class="second-word font uppercase">stackoverflow</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-app-bar>

    <v-navigation-drawer app flat dark mini-variant permanent expand-on-hover>
      <v-list>
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img src="https://randomuser.me/api/portraits/men/11.jpg"></v-img>
          </v-list-item-avatar>

          <v-list-item-title>John Doe</v-list-item-title>
        </v-list-item>
        <v-list-item v-for="item in navbarlist" :key="item.route" :to="item.route">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>{{ item.text }}</v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    navbarlist: [
      { icon: "mdi-view-dashboard", text: "Dashboard", route: "/" },
      { icon: "mdi-upload", text: "Upload", route: "/upload" },
    ],
  }),
};
</script>

<style>
.font {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.uppercase {
  text-transform: uppercase;
}
.first-word {
  font-weight: 400;
}
.second-word {
  font-weight: 200;
  color: grey;
}
.item-tile-icon {
  color: black;
}
</style>

Answer 1

我通过添加clipped到我的v-navigation-drawer组件来修复它。

所以我的最终代码是：

<template>
  <div>
    <v-app-bar app clipped-left flat dark>
      <v-toolbar-title>
        <span class="first-word font uppercase">hi</span>
        <span class="second-word font uppercase">stackoverflow</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-app-bar>

    <v-navigation-drawer app clipped flat dark expand-on-hover>
      <v-list>
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img src="https://randomuser.me/api/portraits/men/11.jpg"></v-img>
          </v-list-item-avatar>

          <v-list-item-title>John Doe</v-list-item-title>
        </v-list-item>
        <v-list-item v-for="item in navbarlist" :key="item.route" :to="item.route">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>{{ item.text }}</v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>