SepDrawer 抽屉

从屏幕边缘滑入的侧边面板,支持四个方向、遮罩、滑入动画、底部按钮

1. 基础用法

JS API 初始化

2. 关闭行为(mask / closable / keyboard / beforeClose)

JS API 初始化

3. 底部按钮(默认 / 自定义 / 无)

JS API 初始化

4. extra 标题右侧操作区

JS API 初始化

5. 嵌套抽屉

JS API 初始化

6. 高级功能(confirmLoading / loading / focusLock)

JS API 初始化

7. 全屏 & 嵌套推拉(fullscreen / push)

JS API 初始化

8. 可拖拽尺寸 & 自定义 header(resizable / header)

JS API 初始化

详细说明

组件定位

SepDrawer 抽屉组件从屏幕边缘滑入,适合承载详情、表单、菜单等轻量级内容。支持 left / right / top / bottom 四个方向,内置遮罩、ESC 关闭、生命周期回调、底部按钮、i18n 多语言等完整能力。

核心配置

  • placement — 弹出方向:left / right / top / bottom
  • width / height — 抽屉尺寸(左右用 width,上下用 height)
  • title — 标题文本
  • content — 内容 HTML
  • header — 自定义头部:undefined 默认 / null 隐藏 / 字符串或函数自定义
  • footer — 底部:undefined 默认按钮 / null 隐藏 / HTML 字符串自定义
  • extra — 标题右侧操作区 HTML
  • fullscreen — 全屏模式,占满整个视口
  • push — 嵌套时父抽屉被推开(推拉效果)

关闭行为

  • closable — 是否显示关闭按钮
  • closeIcon — 关闭按钮图标
  • keyboard — ESC 键关闭
  • mask — 是否显示遮罩
  • maskClosable — 点击遮罩关闭
  • beforeClose — 关闭前钩子,返回 false 阻止
  • destroyOnClose — 关闭后销毁 DOM

生命周期 & 按钮

  • onOpen / onOpened — 打开回调(动画前 / 后)
  • onClose / onClosed — 关闭回调(动画前 / 后)
  • onOk / onCancel — 底部按钮回调
  • okText / cancelText — 按钮文本(支持 i18n)
  • okType / cancelType — 按钮类型
  • okButtonProps / cancelButtonProps — 按钮扩展属性

增强功能

  • confirmLoading — 确定按钮 loading,onOk 返回 Promise 自动处理
  • loading — 内容区 loading 蒙层
  • focusLock — 焦点陷阱,Tab 键在抽屉内循环
  • focusTriggerAfterClose — 关闭后焦点还原到触发元素
  • autoFocus — 打开自动聚焦按钮
  • defaultFocusedButton — 默认聚焦 ok / cancel
  • resizable — 可拖拽调整尺寸,支持 min/maxWidth/Height 范围限制
  • setResizable(v) / setHeader(v) — 运行时切换
  • setFullscreen(v) / setLoading(v) / setConfirmLoading(v) — 运行时控制

9. 自动化测试