Commit 3be0aa121c69ffdedb5578e7288eb3cd973acfb4

Authored by Kang Cheng
1 parent 79885751

Import custom MutationObserver; remove mutation observer before component get destroyed

Showing 1 changed file with 5 additions and 4 deletions   Show diff stats
src/components/tabs/tabs.vue
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 <script> 26 <script>
27 import Icon from '../icon/icon.vue'; 27 import Icon from '../icon/icon.vue';
28 import Render from '../base/render'; 28 import Render from '../base/render';
29 - import { oneOf } from '../../utils/assist'; 29 + import { oneOf, MutationObserver } from '../../utils/assist';
30 import Emitter from '../../mixins/emitter'; 30 import Emitter from '../../mixins/emitter';
31 import elementResizeDetectorMaker from 'element-resize-detector'; 31 import elementResizeDetectorMaker from 'element-resize-detector';
32 32
@@ -342,18 +342,19 @@ @@ -342,18 +342,19 @@
342 342
343 const hiddenParentNode = this.isInsideHiddenElement(); 343 const hiddenParentNode = this.isInsideHiddenElement();
344 if (hiddenParentNode) { 344 if (hiddenParentNode) {
345 - const mutationObserver = new MutationObserver(() => { 345 + this.mutationObserver = new MutationObserver(() => {
346 if (hiddenParentNode.style.display !== 'none') { 346 if (hiddenParentNode.style.display !== 'none') {
347 this.updateBar(); 347 this.updateBar();
348 - mutationObserver.disconnect(); 348 + this.mutationObserver.disconnect();
349 } 349 }
350 }); 350 });
351 351
352 - mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] }); 352 + this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
353 } 353 }
354 }, 354 },
355 beforeDestroy() { 355 beforeDestroy() {
356 this.observer.removeListener(this.$refs.navWrap, this.handleResize); 356 this.observer.removeListener(this.$refs.navWrap, this.handleResize);
  357 + this.mutationObserver.disconnect();
357 } 358 }
358 }; 359 };
359 </script> 360 </script>