mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] optimize popup mixin (#1979)
This commit is contained in:
parent
5564fbf624
commit
88d8eb0897
@ -1,13 +1,8 @@
|
||||
export default {
|
||||
id: 1,
|
||||
zIndex: 2000,
|
||||
stack: [],
|
||||
lockCount: 0,
|
||||
|
||||
plusKey(key) {
|
||||
return this[key]++;
|
||||
},
|
||||
|
||||
get top() {
|
||||
return this.stack[this.stack.length - 1];
|
||||
}
|
||||
|
@ -61,10 +61,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this._popupId = 'popup-' + context.plusKey('id');
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.getContainer) {
|
||||
this.move();
|
||||
@ -101,7 +97,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果属性中传入了`zIndex`,则覆盖`context`中对应的`zIndex`
|
||||
// cover default zIndex
|
||||
if (this.zIndex !== undefined) {
|
||||
context.zIndex = this.zIndex;
|
||||
}
|
||||
@ -112,6 +108,7 @@ export default {
|
||||
if (this.lockScroll) {
|
||||
on(document, 'touchstart', this.touchStart);
|
||||
on(document, 'touchmove', this.onTouchMove);
|
||||
|
||||
if (!context.lockCount) {
|
||||
document.body.classList.add('van-overflow-hidden');
|
||||
}
|
||||
@ -128,13 +125,14 @@ export default {
|
||||
context.lockCount--;
|
||||
off(document, 'touchstart', this.touchStart);
|
||||
off(document, 'touchmove', this.onTouchMove);
|
||||
|
||||
if (!context.lockCount) {
|
||||
document.body.classList.remove('van-overflow-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
manager.close(this._popupId);
|
||||
manager.close(this);
|
||||
this.$emit('input', false);
|
||||
},
|
||||
|
||||
@ -184,16 +182,16 @@ export default {
|
||||
renderOverlay() {
|
||||
if (this.overlay) {
|
||||
manager.open(this, {
|
||||
zIndex: context.plusKey('zIndex'),
|
||||
zIndex: context.zIndex++,
|
||||
className: this.overlayClass,
|
||||
customStyle: this.overlayStyle
|
||||
});
|
||||
} else {
|
||||
manager.close(this._popupId);
|
||||
manager.close(this);
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$el.style.zIndex = context.plusKey('zIndex');
|
||||
this.$el.style.zIndex = context.zIndex++;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -10,23 +10,23 @@ const defaultConfig = {
|
||||
export default {
|
||||
open(vm, config) {
|
||||
/* istanbul ignore next */
|
||||
if (!context.stack.some(item => item.vm._popupId === vm._popupId)) {
|
||||
if (!context.stack.some(item => item.vm === vm)) {
|
||||
const el = vm.$el;
|
||||
const targetNode = el && el.parentNode && el.parentNode.nodeType !== 11 ? el.parentNode : document.body;
|
||||
context.stack.push({ vm, config, targetNode });
|
||||
const target = el && el.parentNode ? el.parentNode : document.body;
|
||||
context.stack.push({ vm, config, target });
|
||||
this.update();
|
||||
};
|
||||
},
|
||||
|
||||
close(id) {
|
||||
close(vm) {
|
||||
const { stack } = context;
|
||||
|
||||
if (stack.length) {
|
||||
if (context.top.vm._popupId === id) {
|
||||
if (context.top.vm === vm) {
|
||||
stack.pop();
|
||||
this.update();
|
||||
} else {
|
||||
context.stack = stack.filter(item => item.vm._popupId !== id);
|
||||
context.stack = stack.filter(item => item.vm !== vm);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -48,9 +48,9 @@ export default {
|
||||
}
|
||||
|
||||
if (context.top) {
|
||||
const { targetNode, config } = context.top;
|
||||
const { target, config } = context.top;
|
||||
|
||||
targetNode.appendChild(modal.$el);
|
||||
target.appendChild(modal.$el);
|
||||
Object.assign(modal, {
|
||||
...defaultConfig,
|
||||
...config,
|
||||
|
Loading…
x
Reference in New Issue
Block a user