@liuzengwei/element-ui 2.15.5-xn.51 → 2.15.5-xn.52
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/lib/drawer.js +157 -9
- package/lib/element-ui.common.js +162 -14
- package/lib/index.js +1 -1
- package/lib/theme-chalk/drawer.css +1 -1
- package/lib/theme-chalk/index.css +1 -1
- package/package.json +1 -1
- package/packages/drawer/src/main.vue +144 -7
- package/packages/theme-chalk/lib/drawer.css +1 -1
- package/packages/theme-chalk/lib/index.css +1 -1
- package/packages/theme-chalk/src/drawer.scss +31 -0
- package/src/index.js +1 -1
- package/types/drawer.d.ts +16 -0
package/package.json
CHANGED
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
@after-enter="afterEnter"
|
|
5
5
|
@after-leave="afterLeave">
|
|
6
6
|
<div
|
|
7
|
-
class="el-drawer__wrapper"
|
|
7
|
+
:class="referenceMode ? 'el-drawer__wrapper-reference' : 'el-drawer__wrapper'"
|
|
8
8
|
tabindex="-1"
|
|
9
9
|
v-show="visible">
|
|
10
10
|
<div
|
|
11
11
|
class="el-drawer__container"
|
|
12
|
-
:class="visible && 'el-drawer__open'"
|
|
12
|
+
:class="[visible && 'el-drawer__open', referenceMode && 'el-drawer__reference-mode']"
|
|
13
13
|
@click.self="handleWrapperClick"
|
|
14
14
|
role="document"
|
|
15
15
|
tabindex="-1">
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
aria-labelledby="el-drawer__title"
|
|
19
19
|
:aria-label="title"
|
|
20
20
|
class="el-drawer"
|
|
21
|
-
:class="[
|
|
22
|
-
:style="
|
|
21
|
+
:class="[effectiveDirection, customClass, referenceMode && 'is-reference']"
|
|
22
|
+
:style="drawerStyle"
|
|
23
23
|
ref="drawer"
|
|
24
24
|
role="dialog"
|
|
25
25
|
tabindex="-1"
|
|
@@ -110,6 +110,21 @@ export default {
|
|
|
110
110
|
withHeader: {
|
|
111
111
|
type: Boolean,
|
|
112
112
|
default: true
|
|
113
|
+
},
|
|
114
|
+
reference: {
|
|
115
|
+
type: [String, Object],
|
|
116
|
+
default: null
|
|
117
|
+
},
|
|
118
|
+
placement: {
|
|
119
|
+
type: String,
|
|
120
|
+
default: 'right',
|
|
121
|
+
validator(val) {
|
|
122
|
+
return ['top', 'bottom', 'left', 'right'].indexOf(val) !== -1;
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
offset: {
|
|
126
|
+
type: Number,
|
|
127
|
+
default: 0
|
|
113
128
|
}
|
|
114
129
|
},
|
|
115
130
|
computed: {
|
|
@@ -118,12 +133,42 @@ export default {
|
|
|
118
133
|
},
|
|
119
134
|
drawerSize() {
|
|
120
135
|
return typeof this.size === 'number' ? `${this.size}px` : this.size;
|
|
136
|
+
},
|
|
137
|
+
referenceMode() {
|
|
138
|
+
return !!this.reference;
|
|
139
|
+
},
|
|
140
|
+
effectiveDirection() {
|
|
141
|
+
// 在 reference 模式下，根据 placement 映射到对应的 direction
|
|
142
|
+
if (this.referenceMode) {
|
|
143
|
+
const placementToDirection = {
|
|
144
|
+
'top': 'btt',
|
|
145
|
+
'bottom': 'ttb',
|
|
146
|
+
'left': 'ltr',
|
|
147
|
+
'right': 'rtl'
|
|
148
|
+
};
|
|
149
|
+
return placementToDirection[this.placement] || 'rtl';
|
|
150
|
+
}
|
|
151
|
+
return this.direction;
|
|
152
|
+
},
|
|
153
|
+
drawerStyle() {
|
|
154
|
+
if (this.referenceMode) {
|
|
155
|
+
const style = { ...this.position };
|
|
156
|
+
if (this.placement === 'left' || this.placement === 'right') {
|
|
157
|
+
style.width = this.drawerSize;
|
|
158
|
+
} else {
|
|
159
|
+
style.height = this.drawerSize;
|
|
160
|
+
}
|
|
161
|
+
return style;
|
|
162
|
+
} else {
|
|
163
|
+
return this.isHorizontal ? `width: ${this.drawerSize}` : `height: ${this.drawerSize}`;
|
|
164
|
+
}
|
|
121
165
|
}
|
|
122
166
|
},
|
|
123
167
|
data() {
|
|
124
168
|
return {
|
|
125
169
|
closed: false,
|
|
126
|
-
prevActiveElement: null
|
|
170
|
+
prevActiveElement: null,
|
|
171
|
+
position: {}
|
|
127
172
|
};
|
|
128
173
|
},
|
|
129
174
|
watch: {
|
|
@@ -131,10 +176,20 @@ export default {
|
|
|
131
176
|
if (val) {
|
|
132
177
|
this.closed = false;
|
|
133
178
|
this.$emit('open');
|
|
134
|
-
if (this.
|
|
179
|
+
if (this.referenceMode) {
|
|
180
|
+
const referenceEl = this.getReferenceElement();
|
|
181
|
+
if (referenceEl) {
|
|
182
|
+
referenceEl.appendChild(this.$el);
|
|
183
|
+
}
|
|
184
|
+
} else if (this.appendToBody) {
|
|
135
185
|
document.body.appendChild(this.$el);
|
|
136
186
|
}
|
|
137
187
|
this.prevActiveElement = document.activeElement;
|
|
188
|
+
if (this.referenceMode) {
|
|
189
|
+
this.$nextTick(() => {
|
|
190
|
+
this.updatePosition();
|
|
191
|
+
});
|
|
192
|
+
}
|
|
138
193
|
} else {
|
|
139
194
|
if (!this.closed) {
|
|
140
195
|
this.$emit('close');
|
|
@@ -184,22 +239,104 @@ export default {
|
|
|
184
239
|
// pressing `ESC` will call this method, and also close the drawer.
|
|
185
240
|
// This method also calls `beforeClose` if there was one.
|
|
186
241
|
this.closeDrawer();
|
|
242
|
+
},
|
|
243
|
+
getReferenceElement() {
|
|
244
|
+
if (typeof this.reference === 'string') {
|
|
245
|
+
return document.querySelector(this.reference);
|
|
246
|
+
} else if (this.reference && this.reference.$el) {
|
|
247
|
+
return this.reference.$el;
|
|
248
|
+
} else {
|
|
249
|
+
return this.reference;
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
updatePosition() {
|
|
253
|
+
if (!this.referenceMode) return;
|
|
254
|
+
|
|
255
|
+
const referenceEl = this.getReferenceElement();
|
|
256
|
+
if (!referenceEl) {
|
|
257
|
+
console.warn('[ElDrawer] Reference element not found');
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
// 确保参考元素有 position 样式
|
|
262
|
+
const computedStyle = window.getComputedStyle(referenceEl);
|
|
263
|
+
if (computedStyle.position === 'static') {
|
|
264
|
+
referenceEl.style.position = 'relative';
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
const { placement, offset } = this;
|
|
268
|
+
const position = {};
|
|
269
|
+
|
|
270
|
+
switch (placement) {
|
|
271
|
+
case 'top':
|
|
272
|
+
position.left = '0';
|
|
273
|
+
position.bottom = `${offset}px`;
|
|
274
|
+
position.top = 'auto';
|
|
275
|
+
position.right = '0';
|
|
276
|
+
break;
|
|
277
|
+
case 'bottom':
|
|
278
|
+
position.left = '0';
|
|
279
|
+
position.top = `${offset}px`;
|
|
280
|
+
position.bottom = 'auto';
|
|
281
|
+
position.right = '0';
|
|
282
|
+
break;
|
|
283
|
+
case 'left':
|
|
284
|
+
position.top = '0';
|
|
285
|
+
position.right = 'auto';
|
|
286
|
+
position.left = `${offset}px`;
|
|
287
|
+
position.bottom = '0';
|
|
288
|
+
break;
|
|
289
|
+
case 'right':
|
|
290
|
+
position.top = '0';
|
|
291
|
+
position.left = 'auto';
|
|
292
|
+
position.right = `${offset}px`;
|
|
293
|
+
position.bottom = '0';
|
|
294
|
+
break;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
this.position = position;
|
|
298
|
+
},
|
|
299
|
+
handleScroll() {
|
|
300
|
+
if (this.referenceMode && this.visible) {
|
|
301
|
+
this.updatePosition();
|
|
302
|
+
}
|
|
303
|
+
},
|
|
304
|
+
handleResize() {
|
|
305
|
+
if (this.referenceMode && this.visible) {
|
|
306
|
+
this.updatePosition();
|
|
307
|
+
}
|
|
187
308
|
}
|
|
188
309
|
},
|
|
189
310
|
mounted() {
|
|
190
311
|
if (this.visible) {
|
|
191
312
|
this.rendered = true;
|
|
192
313
|
this.open();
|
|
193
|
-
if (this.
|
|
314
|
+
if (this.referenceMode) {
|
|
315
|
+
const referenceEl = this.getReferenceElement();
|
|
316
|
+
if (referenceEl) {
|
|
317
|
+
referenceEl.appendChild(this.$el);
|
|
318
|
+
}
|
|
319
|
+
} else if (this.appendToBody) {
|
|
194
320
|
document.body.appendChild(this.$el);
|
|
195
321
|
}
|
|
196
322
|
}
|
|
323
|
+
if (this.referenceMode) {
|
|
324
|
+
window.addEventListener('scroll', this.handleScroll, true);
|
|
325
|
+
window.addEventListener('resize', this.handleResize);
|
|
326
|
+
}
|
|
197
327
|
},
|
|
198
328
|
destroyed() {
|
|
199
329
|
// if appendToBody is true, remove DOM node after destroy
|
|
200
330
|
if (this.appendToBody && this.$el && this.$el.parentNode) {
|
|
201
331
|
this.$el.parentNode.removeChild(this.$el);
|
|
202
332
|
}
|
|
333
|
+
if (this.referenceMode && this.$el && this.$el.parentNode) {
|
|
334
|
+
this.$el.parentNode.removeChild(this.$el);
|
|
335
|
+
}
|
|
336
|
+
if (this.referenceMode) {
|
|
337
|
+
window.removeEventListener('scroll', this.handleScroll, true);
|
|
338
|
+
window.removeEventListener('resize', this.handleResize);
|
|
339
|
+
}
|
|
203
340
|
}
|
|
204
341
|
};
|
|
205
342
|
</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@-webkit-keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes rtl-drawer-in{0%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes rtl-drawer-in{0%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes rtl-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}}@keyframes rtl-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}}@-webkit-keyframes ltr-drawer-in{0%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ltr-drawer-in{0%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ltr-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}}@keyframes ltr-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}}@-webkit-keyframes ttb-drawer-in{0%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ttb-drawer-in{0%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ttb-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}}@keyframes ttb-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}}@-webkit-keyframes btt-drawer-in{0%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes btt-drawer-in{0%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes btt-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}}@keyframes btt-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}}.el-drawer{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#FFF;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);overflow:hidden;outline:0}.el-drawer.rtl{-webkit-animation:rtl-drawer-out .3s;animation:rtl-drawer-out .3s;right:0}.el-drawer__open .el-drawer.rtl{-webkit-animation:rtl-drawer-in .3s 1ms;animation:rtl-drawer-in .3s 1ms}.el-drawer.ltr{-webkit-animation:ltr-drawer-out .3s;animation:ltr-drawer-out .3s;left:0}.el-drawer__open .el-drawer.ltr{-webkit-animation:ltr-drawer-in .3s 1ms;animation:ltr-drawer-in .3s 1ms}.el-drawer.ttb{-webkit-animation:ttb-drawer-out .3s;animation:ttb-drawer-out .3s;top:0}.el-drawer__open .el-drawer.ttb{-webkit-animation:ttb-drawer-in .3s 1ms;animation:ttb-drawer-in .3s 1ms}.el-drawer.btt{-webkit-animation:btt-drawer-out .3s;animation:btt-drawer-out .3s;bottom:0}.el-drawer__open .el-drawer.btt{-webkit-animation:btt-drawer-in .3s 1ms;animation:btt-drawer-in .3s 1ms}.el-drawer__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0}.el-drawer__wrapper-reference{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0}.el-drawer__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#72767b;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:32px;padding:20px 20px 0}.el-drawer__header>:first-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.el-drawer__title{margin:0;-webkit-box-flex:1;-ms-flex:1;flex:1;line-height:inherit;font-size:1rem}.el-drawer__close-btn{border:none;cursor:pointer;font-size:20px;color:inherit;background-color:transparent}.el-drawer__body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:auto}.el-drawer__body>*{-webkit-box-sizing:border-box;box-sizing:border-box}.el-drawer.ltr,.el-drawer.rtl{height:100%;top:0;bottom:0}.el-drawer.btt,.el-drawer.ttb{width:100%;left:0;right:0}.el-drawer.is-reference{position:absolute}.el-drawer.is-reference.btt,.el-drawer.is-reference.ltr,.el-drawer.is-reference.rtl,.el-drawer.is-reference.ttb{height:auto;width:auto;top:auto;bottom:auto;left:auto;right:auto}.el-drawer__container{position:relative;left:0;right:0;top:0;bottom:0;height:100%;width:100%}.el-drawer__container.el-drawer__reference-mode{position:absolute;background-color:transparent;pointer-events:none}.el-drawer__container.el-drawer__reference-mode .el-drawer{pointer-events:auto}.el-drawer-fade-enter-active{-webkit-animation:el-drawer-fade-in .3s;animation:el-drawer-fade-in .3s}.el-drawer-fade-leave-active{animation:el-drawer-fade-in .3s reverse}
|