diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js index d1812f22..b1e76e94 100644 --- a/src/components/Charts/mixins/resize.js +++ b/src/components/Charts/mixins/resize.js @@ -3,15 +3,21 @@ import { debounce } from '@/utils' export default { data() { return { - $_sidebarElm: null + $_sidebarElm: null, + $_resizeHandler: null } }, mounted() { this.initListener() }, activated() { + if (!this.$_resizeHandler) { + // avoid duplication init + this.initListener() + } + + // when keep-alive chart activated, auto resize this.resize() - this.initListener() }, beforeDestroy() { this.destroyListener() @@ -24,27 +30,27 @@ export default { // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential $_sidebarResizeHandler(e) { if (e.propertyName === 'width') { - this.__resizeHandler() + this.$_resizeHandler() } }, initListener() { - this.__resizeHandler = debounce(() => { + this.$_resizeHandler = debounce(() => { this.resize() }, 100) - window.addEventListener('resize', this.__resizeHandler) + window.addEventListener('resize', this.$_resizeHandler) this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) }, destroyListener() { - window.removeEventListener('resize', this.__resizeHandler) + window.removeEventListener('resize', this.$_resizeHandler) + this.$_resizeHandler = null this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) }, resize() { - if (this.chart) { - this.chart.resize() - } + const { chart } = this + chart && chart.resize() } } }