Drawer 抽屉组件
Drawer 用于在当前页面弹出,常用于展示信息、操作确认或承载交互表单。
基础用法
最简单的用法,通过 v-model 控制模态框的显示和隐藏。
自定义尺寸和样式
展示如何自定义抽屉的宽度、高度,以及禁用默认的关闭按钮和遮罩点击关闭功能。
自定义尺寸和样式
这是一个自定义尺寸的抽屉,宽度为 600px,高度为 80vh。
禁用了默认的关闭按钮和遮罩点击关闭功能。
表单抽屉
在抽屉中放置表单内容,适用于用户信息录入、设置配置等场景。
嵌套抽屉
演示多层抽屉的嵌套使用,支持在抽屉内打开另一个抽屉。
嵌套抽屉
这是第一层抽屉的内容。
操作说明
- 点击按钮可以在当前抽屉内打开第二层抽屉
- 第二层抽屉会覆盖在第一层抽屉之上
- 支持多层嵌套,但建议不超过3层
这是第二层抽屉的内容。
事件监听
展示抽屉的打开和关闭事件监听,以及事件处理的实际应用。
beforeClose 关闭前拦截
通过 beforeClose 在关闭前拦截,支持区分关闭来源(关闭按钮、遮罩、Esc)并可返回 Promise。
beforeClose 拦截演示
当前会拦截:关闭按钮 / 遮罩 / ESC
最近一次关闭来源:close-button
触发关闭后会先弹出二次确认框,确认后才真正关闭当前 Drawer。
确认关闭
检测到你通过「右上角关闭按钮」触发关闭,是否确认关闭当前 Drawer?
内容滚动
通过 scrollable 属性控制内容竖向超出时是否出现竖向滚动条,默认为 true。两个抽屉使用相同内容,分别开启和关闭滚动以对比效果。
scrollable = true
这是第 1 行内容,用于撑高抽屉。
这是第 2 行内容,用于撑高抽屉。
这是第 3 行内容,用于撑高抽屉。
这是第 4 行内容,用于撑高抽屉。
这是第 5 行内容,用于撑高抽屉。
这是第 6 行内容,用于撑高抽屉。
这是第 7 行内容,用于撑高抽屉。
这是第 8 行内容,用于撑高抽屉。
这是第 9 行内容,用于撑高抽屉。
这是第 10 行内容,用于撑高抽屉。
这是第 11 行内容,用于撑高抽屉。
这是第 12 行内容,用于撑高抽屉。
这是第 13 行内容,用于撑高抽屉。
这是第 14 行内容,用于撑高抽屉。
这是第 15 行内容,用于撑高抽屉。
这是第 16 行内容,用于撑高抽屉。
这是第 17 行内容,用于撑高抽屉。
这是第 18 行内容,用于撑高抽屉。
这是第 19 行内容,用于撑高抽屉。
这是第 20 行内容,用于撑高抽屉。
这是第 21 行内容,用于撑高抽屉。
这是第 22 行内容,用于撑高抽屉。
这是第 23 行内容,用于撑高抽屉。
这是第 24 行内容,用于撑高抽屉。
这是第 25 行内容,用于撑高抽屉。
这是第 26 行内容,用于撑高抽屉。
这是第 27 行内容,用于撑高抽屉。
这是第 28 行内容,用于撑高抽屉。
这是第 29 行内容,用于撑高抽屉。
这是第 30 行内容,用于撑高抽屉。
这是第 31 行内容,用于撑高抽屉。
这是第 32 行内容,用于撑高抽屉。
这是第 33 行内容,用于撑高抽屉。
这是第 34 行内容,用于撑高抽屉。
这是第 35 行内容,用于撑高抽屉。
这是第 36 行内容,用于撑高抽屉。
这是第 37 行内容,用于撑高抽屉。
这是第 38 行内容,用于撑高抽屉。
这是第 39 行内容,用于撑高抽屉。
这是第 40 行内容,用于撑高抽屉。
scrollable = false
这是第 1 行内容,用于撑高抽屉。
这是第 2 行内容,用于撑高抽屉。
这是第 3 行内容,用于撑高抽屉。
这是第 4 行内容,用于撑高抽屉。
这是第 5 行内容,用于撑高抽屉。
这是第 6 行内容,用于撑高抽屉。
这是第 7 行内容,用于撑高抽屉。
这是第 8 行内容,用于撑高抽屉。
这是第 9 行内容,用于撑高抽屉。
这是第 10 行内容,用于撑高抽屉。
这是第 11 行内容,用于撑高抽屉。
这是第 12 行内容,用于撑高抽屉。
这是第 13 行内容,用于撑高抽屉。
这是第 14 行内容,用于撑高抽屉。
这是第 15 行内容,用于撑高抽屉。
这是第 16 行内容,用于撑高抽屉。
这是第 17 行内容,用于撑高抽屉。
这是第 18 行内容,用于撑高抽屉。
这是第 19 行内容,用于撑高抽屉。
这是第 20 行内容,用于撑高抽屉。
这是第 21 行内容,用于撑高抽屉。
这是第 22 行内容,用于撑高抽屉。
这是第 23 行内容,用于撑高抽屉。
这是第 24 行内容,用于撑高抽屉。
这是第 25 行内容,用于撑高抽屉。
这是第 26 行内容,用于撑高抽屉。
这是第 27 行内容,用于撑高抽屉。
这是第 28 行内容,用于撑高抽屉。
这是第 29 行内容,用于撑高抽屉。
这是第 30 行内容,用于撑高抽屉。
这是第 31 行内容,用于撑高抽屉。
这是第 32 行内容,用于撑高抽屉。
这是第 33 行内容,用于撑高抽屉。
这是第 34 行内容,用于撑高抽屉。
这是第 35 行内容,用于撑高抽屉。
这是第 36 行内容,用于撑高抽屉。
这是第 37 行内容,用于撑高抽屉。
这是第 38 行内容,用于撑高抽屉。
这是第 39 行内容,用于撑高抽屉。
这是第 40 行内容,用于撑高抽屉。
属性 Props
top | right | bottom | left
关闭前回调,返回 `false` 或 Promise resolve `false` 可阻止关闭
(context: { source: 'close-button' | 'mask' | 'esc' }) => boolean | void | Promise<boolean | void>