From fd1bdec706314c47adc9f7d622526117ba56bc08 Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 2 Nov 2018 12:09:01 +0800 Subject: [PATCH 1/3] fixed bug #1285 --- src/components/Charts/mixins/resize.js | 11 +++++++---- src/views/dashboard/admin/components/LineChart.vue | 11 +++++++---- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js index dc61f859204..fcfee400759 100644 --- a/src/components/Charts/mixins/resize.js +++ b/src/components/Charts/mixins/resize.js @@ -9,14 +9,17 @@ export default { }, 100) window.addEventListener('resize', this.__resizeHandler) - const sidebarElm = document.getElementsByClassName('sidebar-container')[0] - sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) + this.sidebarElm = document.getElementsByClassName('sidebar-container')[0] + if (this.sidebarElm) { + this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) + } }, beforeDestroy() { window.removeEventListener('resize', this.__resizeHandler) - const sidebarElm = document.getElementsByClassName('sidebar-container')[0] - sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) + if (this.sidebarElm) { + this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) + } }, methods: { sidebarResizeHandler(e) { diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue index ef493c4b891..1f91232fce1 100644 --- a/src/views/dashboard/admin/components/LineChart.vue +++ b/src/views/dashboard/admin/components/LineChart.vue @@ -55,8 +55,10 @@ export default { } // 监听侧边栏的变化 - const sidebarElm = document.getElementsByClassName('sidebar-container')[0] - sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) + this.sidebarElm = document.getElementsByClassName('sidebar-container')[0] + if (this.sidebarElm) { + this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) + } }, beforeDestroy() { if (!this.chart) { @@ -66,8 +68,9 @@ export default { window.removeEventListener('resize', this.__resizeHandler) } - const sidebarElm = document.getElementsByClassName('sidebar-container')[0] - sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) + if (this.sidebarElm) { + this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) + } this.chart.dispose() this.chart = null From 4b2bfd561010be5bd138d2b14b2e503f3f7b445e Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 2 Nov 2018 14:32:31 +0800 Subject: [PATCH 2/3] rewrite the code to make it elegant --- src/components/Charts/mixins/resize.js | 8 ++------ src/views/dashboard/admin/components/LineChart.vue | 8 ++------ 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js index fcfee400759..fe11e2c07cb 100644 --- a/src/components/Charts/mixins/resize.js +++ b/src/components/Charts/mixins/resize.js @@ -10,16 +10,12 @@ export default { window.addEventListener('resize', this.__resizeHandler) this.sidebarElm = document.getElementsByClassName('sidebar-container')[0] - if (this.sidebarElm) { - this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) - } + this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) }, beforeDestroy() { window.removeEventListener('resize', this.__resizeHandler) - if (this.sidebarElm) { - this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) - } + this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) }, methods: { sidebarResizeHandler(e) { diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue index 1f91232fce1..7656de030ff 100644 --- a/src/views/dashboard/admin/components/LineChart.vue +++ b/src/views/dashboard/admin/components/LineChart.vue @@ -56,9 +56,7 @@ export default { // 监听侧边栏的变化 this.sidebarElm = document.getElementsByClassName('sidebar-container')[0] - if (this.sidebarElm) { - this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) - } + this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) }, beforeDestroy() { if (!this.chart) { @@ -68,9 +66,7 @@ export default { window.removeEventListener('resize', this.__resizeHandler) } - if (this.sidebarElm) { - this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) - } + this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) this.chart.dispose() this.chart = null From 74e6721bf3d8ae2123329ac609aa208fb0863055 Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 2 Nov 2018 15:05:45 +0800 Subject: [PATCH 3/3] refine --- src/components/Charts/mixins/resize.js | 5 +++++ src/views/dashboard/admin/components/LineChart.vue | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js index fe11e2c07cb..c4c432f4ff9 100644 --- a/src/components/Charts/mixins/resize.js +++ b/src/components/Charts/mixins/resize.js @@ -1,6 +1,11 @@ import { debounce } from '@/utils' export default { + data() { + return { + sidebarElm: null + } + }, mounted() { this.__resizeHandler = debounce(() => { if (this.chart) { diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue index 7656de030ff..dfd121e5ee9 100644 --- a/src/views/dashboard/admin/components/LineChart.vue +++ b/src/views/dashboard/admin/components/LineChart.vue @@ -32,7 +32,8 @@ export default { }, data() { return { - chart: null + chart: null, + sidebarElm: null } }, watch: {