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 / bottomwidth/height— 抽屉尺寸(左右用 width,上下用 height)title— 标题文本content— 内容 HTMLheader— 自定义头部:undefined 默认 / null 隐藏 / 字符串或函数自定义footer— 底部:undefined 默认按钮 / null 隐藏 / HTML 字符串自定义extra— 标题右侧操作区 HTMLfullscreen— 全屏模式,占满整个视口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 / cancelresizable— 可拖拽调整尺寸,支持 min/maxWidth/Height 范围限制setResizable(v)/setHeader(v)— 运行时切换setFullscreen(v)/setLoading(v)/setConfirmLoading(v)— 运行时控制