为什么Quasar抽屉覆盖Vue应用程序中的Quasar工具栏？

Question

我正在使用类星体 UI 框架。 我有一个只有工具栏的主布局文件。 此工具栏显示在我的应用程序的所有页面中。

<template>
  <q-layout view="hHh Lpr lff" style="background-color: #F8F8FA">
    <q-header elevated class="bg-black text-grey-8" height-hint="64">
      <q-toolbar style="height: 64px">
        <q-toolbar-title
          style="cursor: pointer;"
          @click.stop="toHome()"
          shrink
          class="row items-center no-wrap"
        >
          <q-avatar>
            <img src="~assets/logo_white.png" alt="logo" />
          </q-avatar>
          <span class="text-white gilroy q-ml-sm">My App</span>
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

我只想在我的一个页面上放置一个导航抽屉，该页面覆盖在我的主布局的工具栏下方。 我无法弄清楚如何确保覆盖在工具栏顶部没有 go。 这是该页面以及我试图让抽屉覆盖在工具栏下方的尝试：

<-- TestPage.vue -->
<template>
  <q-layout>
    <q-drawer
      v-show="$route.params.slugNumber"
      content-style="background-color: #F8F8FA"
      v-model="leftDrawer"
      :mini="!leftDrawer || miniStateLeft"
      side="left"
      bordered
      overlay
    >
    </q-drawer>
    <q-page-container>
      <q-page>

      </q-page>
    </q-page-container>
  </q-layout>
</template>

这是我的路由器文件供参考：

const routes = [
  {
    path: "/",
    component: () => import("layouts/MainLayout.vue"),
    children: [
      { path: "", component: () => import("pages/HomePage.vue") },
      {
        path: "/testpage",
        component: () => import("pages/TestPage.vue")
      },
    ]
  },
];
export default routes;

很想了解我在这里缺少什么。 提前谢谢了。

Answer 1

尝试将 class z-top应用于 header：

<q-header elevated class="bg-black text-grey-8 z-top" height-hint="64">

来自Quasar Visibility 文档：

[z-top] 将您的元素放置在任何其他组件之上，但在弹出框、工具提示、通知之后。

Answer 2

对我来说，将断点设置为最小值有效。 试试看：breakpoint="500"