diff --git a/src/components/page/Dashboard.vue b/src/components/page/Dashboard.vue index 5850595..22022d8 100644 --- a/src/components/page/Dashboard.vue +++ b/src/components/page/Dashboard.vue @@ -180,8 +180,7 @@ bgColor: '#F5F8FD', bottomPadding: 30, topPadding: 30 - }, - collapse: false + } } }, components: { @@ -193,23 +192,15 @@ } }, created(){ - bus.$on('collapse', msg => { - this.collapse = msg; - }); - // 调用renderChart方法对图表进行重新渲染 - window.addEventListener('resize', ()=>{ - this.$refs.bar.renderChart(); - this.$refs.line.renderChart(); - }) + this.handleListener(); this.changeDate(); }, - watch: { - collapse(){ - setTimeout(() => { - this.$refs.bar.renderChart(); - this.$refs.line.renderChart(); - }, 300); - } + activated(){ + this.handleListener(); + }, + deactivated(){ + window.removeEventListener('resize', this.renderChart); + bus.$off('collapse', this.handleBus); }, methods: { changeDate(){ @@ -218,6 +209,20 @@ const date = new Date(now - (6 - index) * 86400000); item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}` }) + }, + handleListener(){ + bus.$on('collapse', this.handleBus); + // 调用renderChart方法对图表进行重新渲染 + window.addEventListener('resize', this.renderChart) + }, + handleBus(msg){ + setTimeout(() => { + this.renderChart() + }, 300); + }, + renderChart(){ + this.$refs.bar.renderChart(); + this.$refs.line.renderChart(); } } }