布局侧滑菜单(Layout Drawer)

QLayout允许您将视图配置为3x3矩阵，包含可选的页眉和/或页脚。 如果你还没有，请先阅读QLayout文档页面。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QLayoutDrawer'
  ]
}

基本用法

<q-layout>
  ...
  <q-layout-drawer side="left">
    <!-- 侧滑菜单内容 -->
  </q-layout-drawer>
  ...
</q-layout>

QLayoutDrawer Vue属性

Vue属性 类型 说明
side 字符串 ‘left’ 或 ‘right’之一，取决于布局上的侧滑菜单位置。
overlay 布尔 覆盖模式
breakpoint 数字 断点（以像素为单位，定义窗口宽度），在哪个点上侧滑菜单将直接放置在布局上，并且不再充当移动侧滑菜单。默认值是992（直到“sm”且包括）。
behavior 字符串 ‘default’、 ‘desktop’、 ‘mobile’之一。最后两个覆盖断点，并使侧滑菜单仅在桌面上或仅在移动模式下运行，而不管窗口宽度如何。
no-hide-on-route-change 布尔 （Quasar v0.15.7 +）在路由更改期间禁止侧滑菜单隐藏。
no-swipe-open 布尔 禁用通过触摸操作打开侧滑菜单的功能。
no-swipe-close 布尔 禁用通过触摸操作关闭侧滑菜单的功能。如果您的侧滑菜单中有需要触摸操作的组件，则这很有用。背景幕仍然可以通过触摸进行操作。
content-style 对象 侧滑菜单容器元素的对象格式的CSS样式。
content-class 字符串/对象/数组 侧滑菜单容器元素的CSS类。
mini 布尔 (v0.15.11+) 侧滑菜单是否处于迷你模式
mini-width 字符串 (v0.15.11+) 处于迷你模式时抽屉宽度的CSS单位。 默认值：’60px’

样式表示例

<q-layout-drawer
  content-class="bg-grey-3"
  :content-style="{padding: '20px'}"
  side="left"
>
  ...
</q-layout-drawer>

content-style的Vue对象表示法是强制性的。

<q-layout-drawer
  :content-class="['bg-grey-3', 'q-pa-sm']"
  side="left"
>
  ...
</q-layout-drawer>

断点

如果您已经在桌面模式下玩过布局，那么您可能会注意到当您减少屏幕宽度时左侧/右侧侧滑菜单如何神奇地隐藏。 这是设计到Quasar布局组件中的智能响应功能的一部分。

如果您想控制左侧和右侧侧滑菜单的工作方式，则每个QLayoutDrawer上都有一个名为“breakpoint”的属性。 此值表示在侧滑菜单被强制浮在布局上方之前，屏幕的最小尺寸（以像素为单位）。 这对于较小设备最大化屏幕空间是非常重要的功能。

提示
如果您希望侧滑菜单仅在窄屏幕上或只在宽屏幕上执行操作，请查看“behavior”属性，从而有效地禁用断点。

使用v-model

可以使用v-model来控制侧滑菜单的状态（打开/显示和关闭/隐藏）。

<template>
  ...
  <q-layout-drawer v-model="drawer">
    ...
  </q-layout-drawer>
  ...
  <q-btn
    @click="drawer = !drawer"
    flat
    round
    dense
    icon="menu"
  />
  ...
</template>

<script>
export default {
  data () {
    return {
      // "false" 代表隐藏
      // "true" 代表可见
      drawer: true
    }
  }
}
</script>

请注意，如果断点有要求，模型可以在侧滑菜单被渲染时立即进行更改。

Mini模式

需要 Quasar v0.15.11+

侧滑菜单可以在两种模式下运行：“normal”和“mini”，您可以使用QLayoutDrawer上的布尔“mini”属性在它们之间切换。 请注意，“mini”模式在“mobile”行为时不适用。

CSS类

在处理“mini”模式时，有一些CSS类可以帮助您自定义侧滑菜单。 这些非常有用，尤其是在使用“click”触发器时：

CSS类 描述
q-mini-drawer-hide 侧滑菜单处于“mini”模式时隐藏。
q-mini-drawer-only 仅在侧滑菜单处于“mini”模式时显示。

您还可以根据以下事实编写自己的CSS类：QLayoutDrawer在“normal”模式下具有“q-layout-drawer-normal”CSS类，在“mini”模式下具有“q-layout-drawer-mini”。 此外，当侧滑菜单处于“mobile”行为时，它会获得q-layout-drawer-mobile CSS类。

插槽

默认情况下，在“mini”模式下，Quasar CSS会隐藏一些DOM元素以提供整洁的窄侧滑菜单。 但肯定会有一些需要进行深度调整的用例。 您可以使用QLayoutDrawer的“mini”Vue插槽。 在“mini”模式下，此插槽的内容将替换侧滑菜单的默认内容。

<template>
  ...
  <q-layout-drawer
    :mini="miniState"
  >
    <!-- 非“mini"模式侧滑菜单内容 -->

    <div slot="mini">
      <!-- “mini"模式侧滑菜单内容 -->
    </div>
  </q-layout-drawer>
  ...
</template>

<script>
export default {
  data () {
    return {
      miniState: false
    }
  }
}
</script>

使用mouseover/mouseout触发器的示例

<template>
  ...
  <q-layout-drawer
    :mini="miniState"
    @mouseover="miniState = false"
    @mouseout="miniState = true"
  >
    <!-- 侧滑菜单内容 -->
  </q-layout-drawer>
  ...
</template>

<script>
export default {
  data () {
    return {
      miniState: false
    }
  }
}
</script>

单击触发器的示例

在“mini”模式下，如果用户点击侧滑菜单，我们就会切换到正常模式。

<template>
  ...
  <q-layout-drawer
    :mini="miniState"
    @click.capture="drawerClick"
  >
    <!-- 侧滑菜单内容 -->
    <!--
      我们还需要一种方法让用户能够切换回“mini”模式，所以这里有一个按钮的示例，当处于“mini”模式时它会被隐藏：
    -->
    <q-btn
      class="q-mini-drawer-hide"
      label="Go to mini state"
      @click="miniState = true"
    />
  </q-layout-drawer>
  ...
</template>

<script>
export default {
  data () {
    return {
      miniState: false
    }
  },
  methods: {
    drawerClick (e) {
      // 如果处于“mini”状态并且用户点击侧滑菜单，
      // 我们将其切换到“正常”模式
      if (this.miniState) {
        this.miniState = false

        // 注意我们已经用捕获标志注册了一个事件; 
        // 我们需要停止进一步传播，
        // 因为此点击仅用于将侧滑菜单切换到“正常”模式
        e.stopPropagation()
      }
    }
  }
}
</script>
布局页眉和页脚 布局页面