mirror of https://github.com/ElemeFE/element
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
parent
22ba941fa0
commit
13bfb39e9b
|
@ -35,15 +35,18 @@
|
||||||
closed(newVal) {
|
closed(newVal) {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
this.$el.addEventListener('transitionend', () => {
|
this.$el.addEventListener('transitionend', this.destroyElement);
|
||||||
this.$destroy(true);
|
|
||||||
this.$el.parentNode.removeChild(this.$el);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
destroyElement() {
|
||||||
|
this.$el.removeEventListener('transitionend', this.destroyElement);
|
||||||
|
this.$destroy(true);
|
||||||
|
this.$el.parentNode.removeChild(this.$el);
|
||||||
|
},
|
||||||
|
|
||||||
handleClose() {
|
handleClose() {
|
||||||
this.closed = true;
|
this.closed = true;
|
||||||
if (typeof this.onClose === 'function') {
|
if (typeof this.onClose === 'function') {
|
||||||
|
@ -70,4 +73,4 @@
|
||||||
this.startTimer();
|
this.startTimer();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -44,15 +44,18 @@
|
||||||
closed(newVal) {
|
closed(newVal) {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
this.$el.addEventListener('transitionend', () => {
|
this.$el.addEventListener('transitionend', this.destroyElement);
|
||||||
this.$destroy(true);
|
|
||||||
this.$el.parentNode.removeChild(this.$el);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
destroyElement() {
|
||||||
|
this.$el.removeEventListener('transitionend', this.destroyElement);
|
||||||
|
this.$destroy(true);
|
||||||
|
this.$el.parentNode.removeChild(this.$el);
|
||||||
|
},
|
||||||
|
|
||||||
handleClose() {
|
handleClose() {
|
||||||
this.closed = true;
|
this.closed = true;
|
||||||
if (typeof this.onClose === 'function') {
|
if (typeof this.onClose === 'function') {
|
||||||
|
@ -85,4 +88,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue