'离开首页时移动监听事件'

Author: lin-xin

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();
             }
         }
     }