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

Question

我正在使用 quasar 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>

我只想在我的一个页面上放置一个导航抽屉，该页面覆盖在我的主布局中的工具栏下方。我无法弄清楚如何确保叠加层不会出现在工具栏的顶部。这是那个页面，我试图让抽屉覆盖在工具栏下面：

<-- 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 docs：

[z-top] Positions your element on top of any other component, but behind Popovers, Tooltips, Notifications.

Answer 2

对我来说，将断点设置为最小值是可行的。试试那个 :breakpoint="500"

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

Why is Quasar drawer overlaying Quasar toolbar in Vue app?

javascript

html

css

vue.js

quasar-framework