blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[bugfix] Popup: ensure z-index setting order (#4026)

Browse Source
This commit is contained in:
neverland 2019-08-02 10:41:40 +08:00 committed by GitHub
parent d3b214a402
commit ff85de854c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/action-sheet/test/index.spec.js
View File

@ -1,4 +1,4 @@
import { mount } from '../../../test/utils'; import { mount, later } from '../../../test/utils';
import ActionSheet from '..'; import ActionSheet from '..';
test('callback events', () => { test('callback events', () => {
@ -41,7 +41,7 @@ test('callback events', () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('click overlay and close', () => { test('click overlay and close', async () => {
const onInput = jest.fn(); const onInput = jest.fn();
const onClickOverlay = jest.fn(); const onClickOverlay = jest.fn();
const div = document.createElement('div'); const div = document.createElement('div');
@ -71,6 +71,8 @@ test('click overlay and close', () => {
} }
}); });
await later();
div.querySelector('.van-overlay').click(); div.querySelector('.van-overlay').click();
expect(onInput).toHaveBeenCalledWith(false); expect(onInput).toHaveBeenCalledWith(false);
expect(onClickOverlay).toHaveBeenCalledTimes(1); expect(onClickOverlay).toHaveBeenCalledTimes(1);

15
src/dropdown-menu/test/__snapshots__/index.spec.js.snap
View File

@ -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" 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 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-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 van-cell--clickable" style="">
<div class="van-cell__title"><span>A</span></div> <div class="van-cell__title"><span>A</span></div>
</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" 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 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-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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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 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 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-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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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 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 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-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-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"> <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> <!----></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 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 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-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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <div class="van-cell__title"><span>A</span></div>
@ -178,7 +175,6 @@ exports[`show dropdown item 2`] = `
</div> </div>
</div> </div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;"> <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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <div class="van-cell__title"><span>A</span></div>
@ -210,7 +206,6 @@ exports[`show dropdown item 3`] = `
</div> </div>
</div> </div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;"> <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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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 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 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-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-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: 2015;" name="van-popup-slide-top"></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>
</div> </div>
`; `;
@ -252,7 +247,7 @@ exports[`toggle method 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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-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>
</div> </div>
`; `;

30
src/mixins/popup/index.js
View File

@ -168,24 +168,24 @@ export const PopupMixin = {
return; return;
} }
if (this.overlay) { this.$nextTick(() => {
openOverlay(this, { this.updateZIndex(this.overlay ? 1 : 0);
zIndex: context.zIndex++,
duration: this.duration,
className: this.overlayClass,
customStyle: this.overlayStyle
});
} else {
closeOverlay(this);
}
this.updateZIndex(); if (this.overlay) {
openOverlay(this, {
zIndex: context.zIndex++,
duration: this.duration,
className: this.overlayClass,
customStyle: this.overlayStyle
});
} else {
closeOverlay(this);
}
});
}, },
updateZIndex() { updateZIndex(value = 0) {
this.$nextTick(() => { this.$el.style.zIndex = ++context.zIndex + value;
this.$el.style.zIndex = context.zIndex++;
});
} }
} }
}; };

10
src/notify/test/__snapshots__/index.spec.js.snap
View File

@ -1,11 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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>`;

15
src/popup/test/index.spec.js
View File

@ -1,5 +1,5 @@
import Popup from '..'; import Popup from '..';
import { mount, triggerDrag } from '../../../test/utils'; import { mount, triggerDrag, later } from '../../../test/utils';
let wrapper; let wrapper;
afterEach(() => { afterEach(() => {
@ -94,7 +94,7 @@ test('get container with selector', () => {
expect(dom2.parentNode).toEqual(wrapper.vm.$el); expect(dom2.parentNode).toEqual(wrapper.vm.$el);
}); });
test('render overlay', () => { test('render overlay', async () => {
const div = document.createElement('div'); const div = document.createElement('div');
wrapper = mount({ wrapper = mount({
template: ` template: `
@ -112,10 +112,12 @@ test('render overlay', () => {
} }
}); });
await later();
expect(div.querySelector('.van-overlay')).toBeTruthy(); expect(div.querySelector('.van-overlay')).toBeTruthy();
}); });
test('watch overlay prop', () => { test('watch overlay prop', async () => {
const div = document.createElement('div'); const div = document.createElement('div');
wrapper = mount({ wrapper = mount({
template: ` template: `
@ -135,16 +137,19 @@ test('watch overlay prop', () => {
} }
}); });
await later();
expect(div.querySelector('.van-overlay')).toBeFalsy(); expect(div.querySelector('.van-overlay')).toBeFalsy();
wrapper.setData({ overlay: true }); wrapper.setData({ overlay: true });
await later();
expect(div.querySelector('.van-overlay')).toBeFalsy(); expect(div.querySelector('.van-overlay')).toBeFalsy();
wrapper.setData({ show: true }); wrapper.setData({ show: true });
await later();
expect(div.querySelector('.van-overlay')).toBeTruthy(); expect(div.querySelector('.van-overlay')).toBeTruthy();
}); });
test('close on click overlay', () => { test('close on click overlay', async () => {
const div = document.createElement('div'); const div = document.createElement('div');
const onClickOverlay = jest.fn(); const onClickOverlay = jest.fn();
@ -172,6 +177,8 @@ test('close on click overlay', () => {
} }
}); });
await later();
const modal = div.querySelector('.van-overlay'); const modal = div.querySelector('.van-overlay');
triggerDrag(modal, 0, -30); triggerDrag(modal, 0, -30);
modal.click(); modal.click();

10
src/toast/test/__snapshots__/index.spec.js.snap
View File

@ -1,26 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`create a forbidClick toast 1`] = ` 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> <!----></i></div>
`; `;
exports[`icon prop 1`] = ` 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> <!----></i>
<div class="van-toast__text">Message</div> <div class="van-toast__text">Message</div>
</div> </div>
`; `;
exports[`icon-prefix prop 1`] = ` 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> <!----></i>
<div class="van-toast__text">Message</div> <div class="van-toast__text">Message</div>
</div> </div>
`; `;
exports[`show html toast 1`] = ` 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 class="van-toast__text">
<div>Message</div> <div>Message</div>
</div> </div>
@ -28,7 +28,7 @@ exports[`show html toast 1`] = `
`; `;
exports[`show loading 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-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 class="van-toast__text">Message</div>
</div> </div>