@ezuikit/control-drawer 0.0.1-beta.5 → 0.0.1-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -41
- package/dist/index.cjs +3 -3
- package/dist/index.esm.js +3 -3
- package/dist/index.umd.js +3 -3
- package/dist/style/style/index.scss +4 -11
- package/dist/style/style.css +1 -1
- package/dist/style/style.js +2 -2
- package/dist/types/index.d.ts +0 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @ezuikit/control-drawer 使用指南
|
|
2
2
|
|
|
3
|
-
抽屉布局控件。只提供布局骨架：遮罩、从四个方向滑出的面板、标题栏与关闭按钮、开合动画和挂载策略；业务内容通过 `content`
|
|
3
|
+
抽屉布局控件。只提供布局骨架：遮罩、从四个方向滑出的面板、标题栏与关闭按钮、开合动画和挂载策略；业务内容通过 `content` 注入
|
|
4
4
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
@@ -65,37 +65,47 @@ const drawer = new Drawer(playerEl, {
|
|
|
65
65
|
|
|
66
66
|
## 配置项
|
|
67
67
|
|
|
68
|
-
| 参数 | 类型 | 默认 | 说明
|
|
69
|
-
| --------------- | ---------------------------------------- | --------- |
|
|
70
|
-
| `title` | `string \| HTMLElement` | - | 标题，字符串按 HTML 插入
|
|
71
|
-
| `content` | `string \| HTMLElement` | - | 内容，字符串按 HTML 插入
|
|
72
|
-
| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | 弹出方向，非法值回退 `right`
|
|
73
|
-
| `width` | `number \| string` | `300` | 面板宽度（左右方向生效），number 视为 px
|
|
74
|
-
| `height` | `number \| string` | `300` | 面板高度（上下方向生效），number 视为 px
|
|
75
|
-
| `showMask` | `boolean` | `true` | 遮罩；关闭后面板以外区域可操作底层内容
|
|
76
|
-
| `maskClosable` | `boolean` | `true` | 点击遮罩关闭
|
|
77
|
-
| `showHeader` | `boolean` | `true` | 头部（标题 + 关闭按钮）
|
|
78
|
-
| `showClose` | `boolean` | `true` | 关闭按钮，`showHeader` 为 `false` 时无效
|
|
79
|
-
| `closeOnEscape` | `boolean` | `true` | Esc 关闭
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
68
|
+
| 参数 | 类型 | 默认 | 说明 |
|
|
69
|
+
| --------------- | ---------------------------------------- | --------- | -------------------------------------------------- |
|
|
70
|
+
| `title` | `string \| HTMLElement` | - | 标题，字符串按 HTML 插入 |
|
|
71
|
+
| `content` | `string \| HTMLElement` | - | 内容，字符串按 HTML 插入 |
|
|
72
|
+
| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | 弹出方向，非法值回退 `right` |
|
|
73
|
+
| `width` | `number \| string` | `300` | 面板宽度（左右方向生效），number 视为 px |
|
|
74
|
+
| `height` | `number \| string` | `300` | 面板高度（上下方向生效），number 视为 px |
|
|
75
|
+
| `showMask` | `boolean` | `true` | 遮罩；关闭后面板以外区域可操作底层内容 |
|
|
76
|
+
| `maskClosable` | `boolean` | `true` | 点击遮罩关闭 |
|
|
77
|
+
| `showHeader` | `boolean` | `true` | 头部（标题 + 关闭按钮） |
|
|
78
|
+
| `showClose` | `boolean` | `true` | 关闭按钮，`showHeader` 为 `false` 时无效 |
|
|
79
|
+
| `closeOnEscape` | `boolean` | `true` | Esc 关闭 |
|
|
80
|
+
| `duration` | `number` | `300` | 开合动画时长（ms），需与 `--edrawer-duration` 同步 |
|
|
81
|
+
| `open` | `boolean` | `false` | 创建后立即打开（仅构造时生效） |
|
|
82
|
+
| `zIndex` | `number` | - | 根节点层级，缺省取 `--edrawer-z-index`（100） |
|
|
83
|
+
| `className` | `string` | - | 追加到根节点的类名，多个用空格分隔 |
|
|
84
|
+
| `getContainer` | `() => HTMLElement \| null \| undefined` | - | 动态挂载点，见上文 |
|
|
85
|
+
| `onOpenChange` | `(open: boolean) => void` | - | 打开/关闭回调，参数为当前状态 |
|
|
86
|
+
| `onOpenStart` | `() => void` | - | 打开开始（动画开始前同步触发） |
|
|
87
|
+
| `onOpenEnd` | `() => void` | - | 打开结束（过渡结束后触发） |
|
|
88
|
+
| `onCloseStart` | `() => void` | - | 关闭开始（动画开始前同步触发） |
|
|
89
|
+
| `onCloseEnd` | `() => void` | - | 关闭结束（过渡结束、根节点隐藏后触发） |
|
|
85
90
|
|
|
86
91
|
## 方法 / 属性
|
|
87
92
|
|
|
88
|
-
| 成员 | 说明
|
|
89
|
-
| ----------------------------------------- |
|
|
93
|
+
| 成员 | 说明 |
|
|
94
|
+
| ----------------------------------------- | ---------------------------------------------------------------- |
|
|
90
95
|
| `open` | 布尔属性（getter/setter），打开/关闭抽屉；重复设置相同状态为幂等 |
|
|
91
|
-
| `setTitle(title)` / `setContent(content)` | 更新标题 / 内容，不重建 DOM
|
|
92
|
-
| `updateOptions(opts)` | 更新配置并重建 DOM，保持当前开合状态且不重播动画
|
|
93
|
-
| `destroy()` | 销毁（幂等），移除 DOM、定时器与监听，不触发 `onOpenChange`
|
|
94
|
-
| `Drawer.VERSION` | 构建时由 Rollup 注入的版本号（静态属性）
|
|
96
|
+
| `setTitle(title)` / `setContent(content)` | 更新标题 / 内容，不重建 DOM |
|
|
97
|
+
| `updateOptions(opts)` | 更新配置并重建 DOM，保持当前开合状态且不重播动画 |
|
|
98
|
+
| `destroy()` | 销毁（幂等），移除 DOM、定时器与监听，不触发 `onOpenChange` |
|
|
99
|
+
| `Drawer.VERSION` | 构建时由 Rollup 注入的版本号（静态属性） |
|
|
95
100
|
|
|
96
101
|
## 打开 / 关闭回调
|
|
97
102
|
|
|
98
|
-
|
|
103
|
+
抽屉在开合过程中按生命周期派发回调，触发顺序如下：
|
|
104
|
+
|
|
105
|
+
- 打开：`onOpenStart`（同步，动画开始前）→ `onOpenEnd`（过渡结束后）
|
|
106
|
+
- 关闭：`onCloseStart`（同步，动画开始前）→ `onCloseEnd`（过渡结束、根节点隐藏后）
|
|
107
|
+
|
|
108
|
+
另有 `onOpenChange(open)`：打开与关闭时同步调用，参数为当前状态 `boolean`。结束回调依赖与过渡时长（`duration`，默认 300ms）一致的定时器；`destroy()` 或反向切换会取消尚未触发的回调。
|
|
99
109
|
|
|
100
110
|
## 样式与类名
|
|
101
111
|
|
|
@@ -106,21 +116,23 @@ const drawer = new Drawer(playerEl, {
|
|
|
106
116
|
|
|
107
117
|
外观通过 CSS 变量定制，可设在 `className` 对应的根节点上按实例覆盖：
|
|
108
118
|
|
|
109
|
-
| 变量 | 默认 | 说明
|
|
110
|
-
| ------------------------------- | ----------------- |
|
|
111
|
-
| `--edrawer-z-index` | `100` | 根节点层级
|
|
112
|
-
| `--edrawer-
|
|
113
|
-
| `--edrawer-
|
|
114
|
-
| `--edrawer-
|
|
115
|
-
| `--edrawer-
|
|
116
|
-
| `--edrawer-
|
|
117
|
-
| `--edrawer-max-
|
|
118
|
-
| `--edrawer-
|
|
119
|
-
| `--edrawer-header-
|
|
120
|
-
| `--edrawer-
|
|
121
|
-
| `--edrawer-
|
|
122
|
-
| `--edrawer-
|
|
123
|
-
| `--edrawer-
|
|
119
|
+
| 变量 | 默认 | 说明 |
|
|
120
|
+
| ------------------------------- | ----------------- | -------------------- |
|
|
121
|
+
| `--edrawer-z-index` | `100` | 根节点层级 |
|
|
122
|
+
| `--edrawer-duration` | `0.3s` | 开合动画时长 |
|
|
123
|
+
| `--edrawer-bg` | `#fff` | 面板背景 |
|
|
124
|
+
| `--edrawer-color` | `rgba(0,0,0,.88)` | 面板文字色 |
|
|
125
|
+
| `--edrawer-mask-bg` | `rgba(0,0,0,.3)` | 遮罩色 |
|
|
126
|
+
| `--edrawer-border-color` | `rgba(0,0,0,.1)` | 面板内侧边框 |
|
|
127
|
+
| `--edrawer-max-width` | `100%` | 左右方向的最大宽度 |
|
|
128
|
+
| `--edrawer-max-height` | `100%` | 上下方向的最大高度 |
|
|
129
|
+
| `--edrawer-header-height` | `40px` | 头部高度（含分隔线） |
|
|
130
|
+
| `--edrawer-header-padding` | `0 16px` | 头部内边距 |
|
|
131
|
+
| `--edrawer-header-border-color` | `rgba(0,0,0,.08)` | 头部分隔线 |
|
|
132
|
+
| `--edrawer-title-color` | `#333` | 标题色 |
|
|
133
|
+
| `--edrawer-title-font-size` | `14px` | 标题字号 |
|
|
134
|
+
| `--edrawer-close-color` | `rgba(0,0,0,.4)` | 关闭按钮色 |
|
|
135
|
+
| `--edrawer-close-hover-color` | `#333` | 关闭按钮悬停色 |
|
|
124
136
|
|
|
125
137
|
```css
|
|
126
138
|
/* 例：告警消息面板在 PC 端最多占容器 80% 宽 */
|
|
@@ -135,7 +147,7 @@ const drawer = new Drawer(playerEl, {
|
|
|
135
147
|
|
|
136
148
|
**字符串按 HTML 插入。** `title` / `content` / `setTitle` / `setContent` 传字符串时写入 `innerHTML`，只能传可信内容；不可信数据请自行转义或传 `HTMLElement`。
|
|
137
149
|
|
|
138
|
-
|
|
150
|
+
**动画时长可配。** 通过 `duration`（ms）配置开合时长，默认 300；组件会把该值写入根节点的 `--edrawer-duration`，使遮罩/面板的 CSS 过渡与 JS 定时器保持一致。只在宿主 CSS 里改 `transition` 时长不会改变 JS 的隐藏时机。面板为 CSS `transition: transform` 滑入滑出，遮罩为 `transition: opacity` 淡入淡出，不使用 `@keyframes`。组件内置样式不再响应 `prefers-reduced-motion`（Windows 关闭"显示动画"、远程桌面 / 虚拟机、省电模式下浏览器都会命中该偏好，会导致抽屉瞬间出现）；需要尊重该偏好的宿主可自行追加 `@media (prefers-reduced-motion: reduce) { .edrawer-mask, .edrawer-panel { transition: none; } }`。
|
|
139
151
|
|
|
140
152
|
**`updateOptions` 会重建 DOM。** 以 `HTMLElement` 传入的内容会被移动到新节点，引用与其上的监听保留，但内部滚动位置会重置；只改文案时用 `setTitle` / `setContent`。
|
|
141
153
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/control-drawer v0.0.1-beta.
|
|
3
|
-
* Copyright (c) 2026-10-
|
|
2
|
+
* @ezuikit/control-drawer v0.0.1-beta.7
|
|
3
|
+
* Copyright (c) 2026-10-13 15:01:37 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
"use strict";var _DRAWER_PLACEMENTS_=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,Drawer=function(){function Drawer(container,options){var _this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this.
|
|
6
|
+
"use strict";var _DRAWER_PLACEMENTS_=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,Drawer=function(){function Drawer(container,options){var _this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),this.options.open&&(this.open=!0)}var _proto=Drawer.prototype;return _proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),document.removeEventListener("keydown",this._onKeydown),this._open&&this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown)}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),document.removeEventListener("keydown",this._onKeydown),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===document.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&_DRAWER_PLACEMENTS_.includes(placement)?placement:"right"},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var _this_options_duration,placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex);var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;if(root.style.setProperty("--edrawer-duration",duration+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" focusable="false" aria-hidden="true">\n <path d="M13.3 0.7c-0.4-0.4-1-0.4-1.4 0L7 5.6 2.1 0.7c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7 0.7 11.9c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l4.9 4.9c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l4.9-4.9C13.7 1.7 13.7 1.1 13.3 0.7z"/>\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this_options_duration,_this=this,root=this._$root;if(!this._destroyed&&this._open!==open&&root){this._open=open,this._clearTimers();var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;open?(null==this.options.onOpenStart||this.options.onOpenStart.call(this.options),this._attach(this._resolveMountTarget()),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(null==this.options.onCloseStart||this.options.onCloseStart.call(this.options),root.classList.remove("edrawer-open"),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),document.removeEventListener("keydown",this._onKeydown)),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open)}}}]),Drawer}();Drawer.VERSION="0.0.1-beta.7",module.exports=Drawer;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/control-drawer v0.0.1-beta.
|
|
3
|
-
* Copyright (c) 2026-10-
|
|
2
|
+
* @ezuikit/control-drawer v0.0.1-beta.7
|
|
3
|
+
* Copyright (c) 2026-10-13 15:01:37 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
var _DRAWER_PLACEMENTS_=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,Drawer=function(){function Drawer(container,options){var _this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this.
|
|
6
|
+
var _DRAWER_PLACEMENTS_=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,Drawer=function(){function Drawer(container,options){var _this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),this.options.open&&(this.open=!0)}var _proto=Drawer.prototype;return _proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),document.removeEventListener("keydown",this._onKeydown),this._open&&this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown)}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),document.removeEventListener("keydown",this._onKeydown),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===document.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&_DRAWER_PLACEMENTS_.includes(placement)?placement:"right"},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var _this_options_duration,placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex);var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;if(root.style.setProperty("--edrawer-duration",duration+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" focusable="false" aria-hidden="true">\n <path d="M13.3 0.7c-0.4-0.4-1-0.4-1.4 0L7 5.6 2.1 0.7c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7 0.7 11.9c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l4.9 4.9c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l4.9-4.9C13.7 1.7 13.7 1.1 13.3 0.7z"/>\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this_options_duration,_this=this,root=this._$root;if(!this._destroyed&&this._open!==open&&root){this._open=open,this._clearTimers();var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;open?(null==this.options.onOpenStart||this.options.onOpenStart.call(this.options),this._attach(this._resolveMountTarget()),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(null==this.options.onCloseStart||this.options.onCloseStart.call(this.options),root.classList.remove("edrawer-open"),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),document.removeEventListener("keydown",this._onKeydown)),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open)}}}]),Drawer}();Drawer.VERSION="0.0.1-beta.7";export{Drawer as default};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/control-drawer v0.0.1-beta.
|
|
3
|
-
* Copyright (c) 2026-10-
|
|
2
|
+
* @ezuikit/control-drawer v0.0.1-beta.7
|
|
3
|
+
* Copyright (c) 2026-10-13 15:01:37 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):(global="undefined"!=typeof globalThis?globalThis:global||self).Drawer=factory()}(this,function(){"use strict";var _DRAWER_PLACEMENTS_=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,Drawer=function(){function Drawer(container,options){var _this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this.
|
|
6
|
+
!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):(global="undefined"!=typeof globalThis?globalThis:global||self).Drawer=factory()}(this,function(){"use strict";var _DRAWER_PLACEMENTS_=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,Drawer=function(){function Drawer(container,options){var _this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),this.options.open&&(this.open=!0)}var _proto=Drawer.prototype;return _proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),document.removeEventListener("keydown",this._onKeydown),this._open&&this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown)}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),document.removeEventListener("keydown",this._onKeydown),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===document.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&_DRAWER_PLACEMENTS_.includes(placement)?placement:"right"},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var _this_options_duration,placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex);var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;if(root.style.setProperty("--edrawer-duration",duration+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" focusable="false" aria-hidden="true">\n <path d="M13.3 0.7c-0.4-0.4-1-0.4-1.4 0L7 5.6 2.1 0.7c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7 0.7 11.9c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l4.9 4.9c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l4.9-4.9C13.7 1.7 13.7 1.1 13.3 0.7z"/>\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this_options_duration,_this=this,root=this._$root;if(!this._destroyed&&this._open!==open&&root){this._open=open,this._clearTimers();var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;open?(null==this.options.onOpenStart||this.options.onOpenStart.call(this.options),this._attach(this._resolveMountTarget()),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(null==this.options.onCloseStart||this.options.onCloseStart.call(this.options),root.classList.remove("edrawer-open"),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),document.removeEventListener("keydown",this._onKeydown)),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open)}}}]),Drawer}();return Drawer.VERSION="0.0.1-beta.7",Drawer});
|
|
@@ -99,14 +99,15 @@ $edrawer-duration: 0.3s;
|
|
|
99
99
|
pointer-events: auto;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
//
|
|
102
|
+
// 头部：固定高度（含底部 1px 分隔线），内容垂直居中，避免被头部内的子元素（如日期栏）撑高
|
|
103
103
|
&-header {
|
|
104
104
|
display: flex;
|
|
105
105
|
flex: 0 0 auto;
|
|
106
106
|
align-items: center;
|
|
107
107
|
justify-content: space-between;
|
|
108
108
|
box-sizing: border-box;
|
|
109
|
-
|
|
109
|
+
height: var(--edrawer-header-height, 40px);
|
|
110
|
+
padding: var(--edrawer-header-padding, 0 16px);
|
|
110
111
|
border-bottom: 1px solid var(--edrawer-header-border-color, rgba(0, 0, 0, 0.08));
|
|
111
112
|
}
|
|
112
113
|
|
|
@@ -115,7 +116,7 @@ $edrawer-duration: 0.3s;
|
|
|
115
116
|
min-width: 0;
|
|
116
117
|
overflow: hidden;
|
|
117
118
|
color: var(--edrawer-title-color, #333);
|
|
118
|
-
font-size: var(--edrawer-title-font-size,
|
|
119
|
+
font-size: var(--edrawer-title-font-size, 14px);
|
|
119
120
|
font-weight: 500;
|
|
120
121
|
line-height: 1.5;
|
|
121
122
|
white-space: nowrap;
|
|
@@ -164,11 +165,3 @@ $edrawer-duration: 0.3s;
|
|
|
164
165
|
display: none !important;
|
|
165
166
|
}
|
|
166
167
|
}
|
|
167
|
-
|
|
168
|
-
// 尊重「减少动效」偏好
|
|
169
|
-
@media (prefers-reduced-motion: reduce) {
|
|
170
|
-
.#{$edrawer-prefix-cls}-mask,
|
|
171
|
-
.#{$edrawer-prefix-cls}-panel {
|
|
172
|
-
transition: none;
|
|
173
|
-
}
|
|
174
|
-
}
|
package/dist/style/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.edrawer{bottom:0;box-sizing:border-box;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:var(--edrawer-z-index,100)}.edrawer-fixed{position:fixed}.edrawer-mask{background-color:var(--edrawer-mask-bg,rgba(0,0,0,.3));bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity var(--edrawer-duration,.3s) ease}.edrawer-panel{background-color:var(--edrawer-bg,#fff);box-sizing:border-box;color:var(--edrawer-color,rgba(0,0,0,.88));display:flex;flex-direction:column;overflow:hidden;position:absolute;transition:transform var(--edrawer-duration,.3s) ease}.edrawer-left .edrawer-panel,.edrawer-right .edrawer-panel{bottom:0;max-width:var(--edrawer-max-width,100%);top:0}.edrawer-bottom .edrawer-panel,.edrawer-top .edrawer-panel{left:0;max-height:var(--edrawer-max-height,100%);right:0}.edrawer-right .edrawer-panel{border-left:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));right:0;transform:translateX(100%)}.edrawer-left .edrawer-panel{border-right:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));left:0;transform:translateX(-100%)}.edrawer-top .edrawer-panel{border-bottom:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));top:0;transform:translateY(-100%)}.edrawer-bottom .edrawer-panel{border-top:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));bottom:0;transform:translateY(100%)}.edrawer.edrawer-open .edrawer-mask{opacity:1;pointer-events:auto}.edrawer.edrawer-open .edrawer-panel{pointer-events:auto;transform:translate(0)}.edrawer-header{align-items:center;border-bottom:1px solid var(--edrawer-header-border-color,rgba(0,0,0,.08));box-sizing:border-box;display:flex;flex:0 0 auto;justify-content:space-between;padding:var(--edrawer-header-padding,
|
|
1
|
+
.edrawer{bottom:0;box-sizing:border-box;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:var(--edrawer-z-index,100)}.edrawer-fixed{position:fixed}.edrawer-mask{background-color:var(--edrawer-mask-bg,rgba(0,0,0,.3));bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity var(--edrawer-duration,.3s) ease}.edrawer-panel{background-color:var(--edrawer-bg,#fff);box-sizing:border-box;color:var(--edrawer-color,rgba(0,0,0,.88));display:flex;flex-direction:column;overflow:hidden;position:absolute;transition:transform var(--edrawer-duration,.3s) ease}.edrawer-left .edrawer-panel,.edrawer-right .edrawer-panel{bottom:0;max-width:var(--edrawer-max-width,100%);top:0}.edrawer-bottom .edrawer-panel,.edrawer-top .edrawer-panel{left:0;max-height:var(--edrawer-max-height,100%);right:0}.edrawer-right .edrawer-panel{border-left:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));right:0;transform:translateX(100%)}.edrawer-left .edrawer-panel{border-right:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));left:0;transform:translateX(-100%)}.edrawer-top .edrawer-panel{border-bottom:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));top:0;transform:translateY(-100%)}.edrawer-bottom .edrawer-panel{border-top:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));bottom:0;transform:translateY(100%)}.edrawer.edrawer-open .edrawer-mask{opacity:1;pointer-events:auto}.edrawer.edrawer-open .edrawer-panel{pointer-events:auto;transform:translate(0)}.edrawer-header{align-items:center;border-bottom:1px solid var(--edrawer-header-border-color,rgba(0,0,0,.08));box-sizing:border-box;display:flex;flex:0 0 auto;height:var(--edrawer-header-height,40px);justify-content:space-between;padding:var(--edrawer-header-padding,0 16px)}.edrawer-title{color:var(--edrawer-title-color,#333);flex:1 1 auto;font-size:var(--edrawer-title-font-size,14px);font-weight:500;line-height:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edrawer-close{align-items:center;background:transparent;border:none;border-radius:4px;color:var(--edrawer-close-color,rgba(0,0,0,.4));cursor:pointer;display:inline-flex;flex:0 0 auto;font-size:14px;justify-content:center;margin-left:12px;padding:4px;transition:color .2s}.edrawer-close:hover{background:transparent;color:var(--edrawer-close-hover-color,#333)}.edrawer-close svg{display:block;height:14px;width:14px}.edrawer-body{box-sizing:border-box;flex:1 1 auto;min-height:0;overflow:auto;position:relative}.edrawer-hidden{display:none!important}
|
package/dist/style/style.js
CHANGED
package/dist/types/index.d.ts
CHANGED
|
@@ -49,14 +49,10 @@ interface DrawerOptions {
|
|
|
49
49
|
onOpenChange?: (open: boolean) => void;
|
|
50
50
|
/** 打开开始回调（打开动画开始前同步触发） */
|
|
51
51
|
onOpenStart?: () => void;
|
|
52
|
-
/** 打开中回调（打开过渡进行中触发） */
|
|
53
|
-
onOpening?: () => void;
|
|
54
52
|
/** 打开结束回调（打开过渡结束后触发） */
|
|
55
53
|
onOpenEnd?: () => void;
|
|
56
54
|
/** 关闭开始回调（关闭动画开始前同步触发） */
|
|
57
55
|
onCloseStart?: () => void;
|
|
58
|
-
/** 关闭中回调（关闭过渡进行中触发） */
|
|
59
|
-
onClosing?: () => void;
|
|
60
56
|
/** 关闭结束回调（关闭过渡结束、根节点隐藏后触发） */
|
|
61
57
|
onCloseEnd?: () => void;
|
|
62
58
|
}
|
|
@@ -102,10 +98,6 @@ declare class Drawer {
|
|
|
102
98
|
private _hideTimer;
|
|
103
99
|
/** 打开动画结束后回调的定时器 */
|
|
104
100
|
private _openTimer;
|
|
105
|
-
/** 打开中回调的 rAF 句柄 */
|
|
106
|
-
private _openingRaf;
|
|
107
|
-
/** 关闭中回调的 rAF 句柄 */
|
|
108
|
-
private _closingRaf;
|
|
109
101
|
/**
|
|
110
102
|
* @param container 默认挂载容器，支持 CSS 选择器、元素 ID 或 HTMLElement，缺省或找不到时为 document.body。
|
|
111
103
|
* 非 body 容器需为定位元素（position 非 static），抽屉相对它铺满定位。
|