QLayout 允许您将视图配置为一个 3x3 矩阵，其中包含可选的页眉/页脚（主要用于导航栏，但也可以是别的任何东西）。如果尚未准备好，请先阅读 QLayout 文档页面。

QDrawer 是 QLayout 的侧边栏部分。

QDrawer API

布局生成器

点击下面的按钮来搭建您的布局。

用法

导航菜单

布局控制

您可以使用 v-model 来控制抽屉的状态（打开/关闭）。如果您使用 v-model，那么您不应该使用 @click 事件来切换抽屉的状态，因为这会导致抽屉的状态不同步。

<template>
  <q-layout>
    <!-- ... -->
    <q-drawer v-model="drawer">
      <!-- drawer content -->
    </q-drawer>
    <!-- ... -->
  </q-layout>
</template>

<script>
  export default {
    data() {
      return {
        // "drawer" 将会是 true/false
        drawer: false,
      };
    },
  };
</script>

迷你模式

迷你模式（通过 mini 属性启用）允许您在抽屉的两种状态之间切换：

1. 正常状态（宽度由 width 属性定义）
2. 迷你状态（宽度由 mini-width 属性定义）

您可以使用 mini 插槽来自定义迷你模式下的内容：

覆盖模式

在覆盖模式下，抽屉将会覆盖在页面内容上，而不是推开页面内容。

Accessibility

v2.25+

QDrawer renders its panel as a real <aside> element, so it is exposed to assistive technology as a complementary landmark of your QLayout. The backdrop shown in its overlay states and the invisible swipe-opener strip along the screen edge are hidden from assistive technology — they are redundant, pointer-only affordances. A closed drawer leaves the Tab order and the accessibility tree entirely, so nothing invisible stays reachable.

Keyboard dismissal

While the drawer is in a dismissible state (below its breakpoint or shown in overlay mode), hitting the Escape key closes it — the keyboard counterpart of the backdrop click and the swipe gesture. The persistent prop opts out of it, and an escape-key event is emitted whenever the key is handled.

Your responsibilities

Be aware that in its overlay states the drawer only looks modal — it does not trap or move keyboard focus, so the page behind the backdrop remains keyboard-reachable and readable by screen readers. If your use case calls for it, move focus into the drawer yourself when opening it. The toggle button is app-provided too, so it should manage its own aria-expanded state.

When a drawer holds your primary navigation, wrap the menu inside it in a <nav> element (or add role="navigation") and give it an aria-label, so it is announced as a navigation landmark distinct from the surrounding aside.