Quasar 框架 API 翻译 01: QDrawer

QDrawer 是 Quasar 中满足左右侧边栏的组件

PROPS 属性

Behavior 行为

1. side 设置左右
2. overlay 布尔值，当QDrawer设置为覆盖(overlay)模式时，QDrawer将强制进入固定位置，并且展开后不挤压中间内容，而是覆盖上去。
3. mini 迷你模式，类似 vscode 的侧边栏
4. mini-to-overlay 布尔属性，始终将侧滑菜单设置为固定位置，但仅在迷你模式下会占用布局上的空间。
5. breakpoint 断点，整数值，表示宽度变更的临界值。默认为1023
6. behavior 设置移动端 or 桌面端。覆盖掉默认的动态模式
7. persistent 防止drawer 在路径改变后（页面跳转？）自动折叠
8. show-if-above 当 layout 宽度超过断点时，强制 drawer 显示，不管v-model；当客户端在初始渲染时接管SSR时，这是默认行为
9. no-swipe-open 布尔值。禁止 drawer 被移入视野的默认行为。通常在 ios 平台下有用
10. no-swipe-close 布尔值。禁止 drawer 被移出视野的默认行为
11. no-swipe-backdrop 禁用可以滑动抽屉背景的默认行为

Modele

value 效果等同 v-model

Style 样式

1. width 宽度
2. mini-width 迷你模式下的宽度
3. dark 布尔值，通知组件背景为深色
4. bordered 布尔值，设置默认样式的边框
5. elevated 添加默认样式的阴影
6. content-class 自定义drawer 的 class 属性
7. content-style 自定义 drawer 的样式

SLOTS

1. default 默认属性
2. mini 定义迷你模式下的内容（会覆盖 default 槽）

EVENTS

1. @input -> function(value) 当 drawer 显示/隐藏 状态改变时触发
2. @show -> function(evt) 当component 触发 show()时 触发
3. @before-show -> function(evt) 在组件触发show（）但还未完成时触发
4. @hide -> function(evt)
5. @before-hide -> function(evt) 这两个同上
6. @on-layout -> function(state) 当 drawer 占用 page空间的状态切换时触发
7. @click -> function(evt) 当用户单击/轻击组件且抽屉不在移动模式时发出；在决定切换迷你模式时非常有用
8. @mouseover -> function(evt) 当用户将鼠标光标移到组件上并且抽屉不在移动模式时发出；在决定切换迷你模式时非常有用
9. @mouseout -> function(evt) 当用户将鼠标光标移出组件且抽屉不在移动模式时发出；在决定切换迷你模式时非常有用
10. @mini-state -> function(state) 当抽屉更改迷你模式状态时发出（有时被迫这样做）

METHODS

1. show ([evt]) => void 0，使组件显示出来
2. hide ([evt]) => void 0，使组件隐藏
3. toggle ([evt]) => void 0，当组件在隐藏/显示之间切换时触发