github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Message, Notification: fix transitionend bug 

问题描述：
如果我在组件中加入不同的transition或者transition: all
duration的形式，那么this.$el.addEventListener(‘transitioned’,
handeler)就会监听到多次事件，从而导致多次删除，因为节点已经从dom中删除，
所以最后报错：
’main.vue?8f52:44
Uncaught TypeError: Cannot read property 'removeChild' of null’。
解决办法：
就是在第一次监听到动画结束事件时，将监听器移除即可。
pull/804/head
b1anker 2016-11-03 15:36:57 +08:00
parent 22ba941fa0
commit 13bfb39e9b
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/message/src/main.vue
View File

@ -35,15 +35,18 @@
closed(newVal) {
if (newVal) {
this.visible = false;
this.$el.addEventListener('transitionend', () => {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
});
this.$el.addEventListener('transitionend', this.destroyElement);
}
}
},
methods: {
destroyElement() {
this.$el.removeEventListener('transitionend', this.destroyElement);
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
},
handleClose() {
this.closed = true;
if (typeof this.onClose === 'function') {
@ -70,4 +73,4 @@
this.startTimer();
}
};
</script>
</script>

13
packages/notification/src/main.vue
View File

@ -44,15 +44,18 @@
closed(newVal) {
if (newVal) {
this.visible = false;
this.$el.addEventListener('transitionend', () => {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
});
this.$el.addEventListener('transitionend', this.destroyElement);
}
}
},
methods: {
destroyElement() {
this.$el.removeEventListener('transitionend', this.destroyElement);
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
},
handleClose() {
this.closed = true;
if (typeof this.onClose === 'function') {
@ -85,4 +88,4 @@
}
}
};
</script>
</script>