布局侧滑菜单(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>