mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[bugfix] Popup: ensure z-index setting order (#4026)
This commit is contained in:
neverland
GitHub
parent
d3b214a402
commit
ff85de854c
@ -1,4 +1,4 @@
|
||||
import { mount } from '../../../test/utils';
|
||||
import { mount, later } from '../../../test/utils';
|
||||
import ActionSheet from '..';
|
||||
|
||||
test('callback events', () => {
|
||||
@ -41,7 +41,7 @@ test('callback events', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('click overlay and close', () => {
|
||||
test('click overlay and close', async () => {
|
||||
const onInput = jest.fn();
|
||||
const onClickOverlay = jest.fn();
|
||||
const div = document.createElement('div');
|
||||
@ -71,6 +71,8 @@ test('click overlay and close', () => {
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
div.querySelector('.van-overlay').click();
|
||||
expect(onInput).toHaveBeenCalledWith(false);
|
||||
expect(onClickOverlay).toHaveBeenCalledTimes(1);
|
||||
|
||||
@ -5,7 +5,8 @@ exports[`click option 1`] = `
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">B</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2011;" name="van-popup-slide-top">
|
||||
<div class="van-overlay" style="z-index: 2011; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2012;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable" style="">
|
||||
<div class="van-cell__title"><span>A</span></div>
|
||||
</div>
|
||||
@ -27,7 +28,6 @@ exports[`close-on-click-outside 1`] = `
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2006; position: absolute; animation-duration: 0.2s; display: none;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
|
||||
<div class="van-cell__title"><span>A</span></div>
|
||||
@ -86,7 +86,6 @@ exports[`disable close-on-click-outside 1`] = `
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2008; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
|
||||
<div class="van-cell__title"><span>A</span></div>
|
||||
@ -118,7 +117,6 @@ exports[`render option icon 1`] = `
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2004; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
|
||||
<!----></i>
|
||||
@ -143,7 +141,6 @@ exports[`show dropdown item 1`] = `
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2000; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
|
||||
<div class="van-cell__title"><span>A</span></div>
|
||||
@ -178,7 +175,6 @@ exports[`show dropdown item 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2001; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
|
||||
<div class="van-cell__title"><span>A</span></div>
|
||||
@ -210,7 +206,6 @@ exports[`show dropdown item 3`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2001; position: absolute; animation-duration: 0.2s; display: none;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
|
||||
<div class="van-cell__title"><span>A</span></div>
|
||||
@ -242,8 +237,8 @@ exports[`toggle method 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis"></div></span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2014; position: absolute; animation-duration: 0s;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015;" name="van-popup-slide-top"></div>
|
||||
<div class="van-overlay" style="z-index: 2015; animation-duration: 0s; position: absolute;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016;" name="van-popup-slide-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -252,7 +247,7 @@ exports[`toggle method 2`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis"></div></span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015; display: none;" name="van-popup-slide-top"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016; display: none;" name="van-popup-slide-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -168,24 +168,24 @@ export const PopupMixin = {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.overlay) {
|
||||
openOverlay(this, {
|
||||
zIndex: context.zIndex++,
|
||||
duration: this.duration,
|
||||
className: this.overlayClass,
|
||||
customStyle: this.overlayStyle
|
||||
});
|
||||
} else {
|
||||
closeOverlay(this);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.updateZIndex(this.overlay ? 1 : 0);
|
||||
|
||||
this.updateZIndex();
|
||||
if (this.overlay) {
|
||||
openOverlay(this, {
|
||||
zIndex: context.zIndex++,
|
||||
duration: this.duration,
|
||||
className: this.overlayClass,
|
||||
customStyle: this.overlayStyle
|
||||
});
|
||||
} else {
|
||||
closeOverlay(this);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
updateZIndex() {
|
||||
this.$nextTick(() => {
|
||||
this.$el.style.zIndex = context.zIndex++;
|
||||
});
|
||||
updateZIndex(value = 0) {
|
||||
this.$el.style.zIndex = ++context.zIndex + value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`create a notify 1`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68); z-index: 2000;" name="van-popup-slide-top">test</div>`;
|
||||
exports[`create a notify 1`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68); z-index: 2001;" name="van-popup-slide-top">test</div>`;
|
||||
|
||||
exports[`notify disappear 1`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2000; background: blue;" name="van-popup-slide-top">test</div>`;
|
||||
exports[`notify disappear 1`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2001; background: blue;" name="van-popup-slide-top">test</div>`;
|
||||
|
||||
exports[`notify disappear 2`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2000; background: blue; display: none;" name="van-popup-slide-top">test</div>`;
|
||||
exports[`notify disappear 2`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2001; background: blue; display: none;" name="van-popup-slide-top">test</div>`;
|
||||
|
||||
exports[`notify disappear 3`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68);" name="van-popup-slide-top">text2</div>`;
|
||||
exports[`notify disappear 3`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2002; background: rgb(255, 68, 68);" name="van-popup-slide-top">text2</div>`;
|
||||
|
||||
exports[`notify disappear 4`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68); display: none;" name="van-popup-slide-top">text2</div>`;
|
||||
exports[`notify disappear 4`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2002; background: rgb(255, 68, 68); display: none;" name="van-popup-slide-top">text2</div>`;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import Popup from '..';
|
||||
import { mount, triggerDrag } from '../../../test/utils';
|
||||
import { mount, triggerDrag, later } from '../../../test/utils';
|
||||
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
@ -94,7 +94,7 @@ test('get container with selector', () => {
|
||||
expect(dom2.parentNode).toEqual(wrapper.vm.$el);
|
||||
});
|
||||
|
||||
test('render overlay', () => {
|
||||
test('render overlay', async () => {
|
||||
const div = document.createElement('div');
|
||||
wrapper = mount({
|
||||
template: `
|
||||
@ -112,10 +112,12 @@ test('render overlay', () => {
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(div.querySelector('.van-overlay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('watch overlay prop', () => {
|
||||
test('watch overlay prop', async () => {
|
||||
const div = document.createElement('div');
|
||||
wrapper = mount({
|
||||
template: `
|
||||
@ -135,16 +137,19 @@ test('watch overlay prop', () => {
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(div.querySelector('.van-overlay')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ overlay: true });
|
||||
await later();
|
||||
expect(div.querySelector('.van-overlay')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ show: true });
|
||||
await later();
|
||||
expect(div.querySelector('.van-overlay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('close on click overlay', () => {
|
||||
test('close on click overlay', async () => {
|
||||
const div = document.createElement('div');
|
||||
const onClickOverlay = jest.fn();
|
||||
|
||||
@ -172,6 +177,8 @@ test('close on click overlay', () => {
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const modal = div.querySelector('.van-overlay');
|
||||
triggerDrag(modal, 0, -30);
|
||||
modal.click();
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`create a forbidClick toast 1`] = `
|
||||
<div class="van-toast van-toast--middle" style="z-index: 2000;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon">
|
||||
<div class="van-toast van-toast--middle" style="z-index: 2001;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon">
|
||||
<!----></i></div>
|
||||
`;
|
||||
|
||||
exports[`icon prop 1`] = `
|
||||
<div class="van-toast van-toast--middle" style="z-index: 2004;" name="van-fade"><i class="van-icon van-icon-star-o van-toast__icon">
|
||||
<div class="van-toast van-toast--middle" style="z-index: 2005;" name="van-fade"><i class="van-icon van-icon-star-o van-toast__icon">
|
||||
<!----></i>
|
||||
<div class="van-toast__text">Message</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`icon-prefix prop 1`] = `
|
||||
<div class="van-toast van-toast--middle" style="z-index: 2005;" name="van-fade"><i class="my-icon my-icon-star-o van-toast__icon">
|
||||
<div class="van-toast van-toast--middle" style="z-index: 2006;" name="van-fade"><i class="my-icon my-icon-star-o van-toast__icon">
|
||||
<!----></i>
|
||||
<div class="van-toast__text">Message</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`show html toast 1`] = `
|
||||
<div class="van-toast van-toast--middle van-toast--text" style="z-index: 2003;" name="van-fade">
|
||||
<div class="van-toast van-toast--middle van-toast--text" style="z-index: 2004;" name="van-fade">
|
||||
<div class="van-toast__text">
|
||||
<div>Message</div>
|
||||
</div>
|
||||
@ -28,7 +28,7 @@ exports[`show html toast 1`] = `
|
||||
`;
|
||||
|
||||
exports[`show loading toast 1`] = `
|
||||
<div class="van-toast van-toast--middle" style="z-index: 2002;" name="van-fade">
|
||||
<div class="van-toast van-toast--middle" style="z-index: 2003;" name="van-fade">
|
||||
<div class="van-loading van-loading--circular van-toast__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: white;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-toast__text">Message</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user