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 插槽来自定义迷你模式下的内容：

覆盖模式

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