QDrawer 是 Quasar 中满足左右侧边栏的组件
PROPS 属性
Behavior 行为
- side 设置左右
- overlay 布尔值,当QDrawer设置为覆盖(overlay)模式时,QDrawer将强制进入固定位置,并且展开后不挤压中间内容,而是覆盖上去。
- mini 迷你模式,类似 vscode 的侧边栏
- mini-to-overlay 布尔属性,始终将侧滑菜单设置为固定位置,但仅在迷你模式下会占用布局上的空间。
- breakpoint 断点,整数值,表示宽度变更的临界值。默认为1023
- behavior 设置移动端 or 桌面端。覆盖掉默认的动态模式
- persistent 防止drawer 在路径改变后(页面跳转?)自动折叠
- show-if-above 当 layout 宽度超过断点时,强制 drawer 显示,不管v-model;当客户端在初始渲染时接管SSR时,这是默认行为
- no-swipe-open 布尔值。禁止 drawer 被移入视野的默认行为。通常在 ios 平台下有用
- no-swipe-close 布尔值。禁止 drawer 被移出视野的默认行为
- no-swipe-backdrop 禁用可以滑动抽屉背景的默认行为
Modele
value 效果等同 v-model
Style 样式
- width 宽度
- mini-width 迷你模式下的宽度
- dark 布尔值,通知组件背景为深色
- bordered 布尔值,设置默认样式的边框
- elevated 添加默认样式的阴影
- content-class 自定义drawer 的 class 属性
- content-style 自定义 drawer 的样式
SLOTS
- default 默认属性
- mini 定义迷你模式下的内容(会覆盖 default 槽)
EVENTS
- @input -> function(value) 当 drawer 显示/隐藏 状态改变时触发
- @show -> function(evt) 当component 触发 show()时 触发
- @before-show -> function(evt) 在组件触发show()但还未完成时触发
- @hide -> function(evt)
- @before-hide -> function(evt) 这两个同上
- @on-layout -> function(state) 当 drawer 占用 page空间的状态切换时触发
- @click -> function(evt) 当用户单击/轻击组件且抽屉不在移动模式时发出;在决定切换迷你模式时非常有用
- @mouseover -> function(evt) 当用户将鼠标光标移到组件上并且抽屉不在移动模式时发出;在决定切换迷你模式时非常有用
- @mouseout -> function(evt) 当用户将鼠标光标移出组件且抽屉不在移动模式时发出;在决定切换迷你模式时非常有用
- @mini-state -> function(state) 当抽屉更改迷你模式状态时发出(有时被迫这样做)
METHODS
- show ([evt]) => void 0,使组件显示出来
- hide ([evt]) => void 0,使组件隐藏
- toggle ([evt]) => void 0,当组件在隐藏/显示之间切换时触发