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] Toast: missing fade-out transition in multiple mode (#3504)

Browse Source
This commit is contained in:
neverland 2019-06-14 11:51:08 +08:00 committed by GitHub
parent 769de91a6e
commit 0ea1c6f644
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/toast/Toast.js
View File

@ -69,6 +69,10 @@ export default sfc({
if (this.onOpened) { if (this.onOpened) {
this.onOpened(); this.onOpened();
} }
},
onAfterLeave() {
this.$emit('closed');
} }
}, },
@ -100,7 +104,11 @@ export default sfc({
} }
return ( return (
<transition name="van-fade" onAfterEnter={this.onAfterEnter}> <transition
name="van-fade"
onAfterEnter={this.onAfterEnter}
onAfterLeave={this.onAfterLeave}
>
<div <div
vShow={this.value} vShow={this.value}
class={[ class={[

16
packages/toast/index.js
View File

@ -74,15 +74,17 @@ function Toast(options = {}) {
} }
if (multiple && !isServer) { if (multiple && !isServer) {
clearTimeout(toast.timer); toast.$on('closed', () => {
queue = queue.filter(item => item !== toast); clearTimeout(toast.timer);
queue = queue.filter(item => item !== toast);
const parent = toast.$el.parentNode; const parent = toast.$el.parentNode;
if (parent) { if (parent) {
parent.removeChild(toast.$el); parent.removeChild(toast.$el);
} }
toast.$destroy(); toast.$destroy();
});
} }
} }
}; };

17
packages/toast/test/index.spec.js
View File

@ -75,7 +75,7 @@ test('clear toast', () => {
Toast.allowMultiple(false); Toast.allowMultiple(false);
}); });
test('multiple toast', () => { test('clear multiple toast', () => {
Toast.allowMultiple(); Toast.allowMultiple();
Toast.clear(true); Toast.clear(true);
const toast1 = Toast.success('1'); const toast1 = Toast.success('1');
@ -89,6 +89,21 @@ test('multiple toast', () => {
Toast.allowMultiple(false); Toast.allowMultiple(false);
}); });
test('remove toast DOM when cleared in multiple mode', async () => {
Toast.allowMultiple();
Toast.clear(true);
const toast = Toast({ message: '1' });
await later();
// mock onAfterLeave
toast.clear();
toast.onAfterLeave();
await later();
expect(toast.$el.parentNode).toEqual(null);
Toast.allowMultiple(false);
});
test('set default options', () => { test('set default options', () => {
Toast.setDefaultOptions({ duration: 1000 }); Toast.setDefaultOptions({ duration: 1000 });
expect(Toast().duration).toEqual(1000); expect(Toast().duration).toEqual(1000);