From bc65e59fcb391e69a50f1ef4d26957b2f88f4568 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Sun, 15 Mar 2020 20:07:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dcharts=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=88=96=E8=80=85=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3=E6=98=BE=E7=A4=BAbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/dashboard/mixins/resize.js | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/ruoyi-ui/src/views/dashboard/mixins/resize.js b/ruoyi-ui/src/views/dashboard/mixins/resize.js
index 551679476..d26194c6d 100644
--- a/ruoyi-ui/src/views/dashboard/mixins/resize.js
+++ b/ruoyi-ui/src/views/dashboard/mixins/resize.js
@@ -3,50 +3,54 @@ import { debounce } from '@/utils'
 export default {
   data() {
     return {
-      $_sidebarElm: null
+      $_sidebarElm: null,
+      $_resizeHandler: null
     }
   },
   mounted() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
-  },
-  beforeDestroy() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
+    this.initListener()
   },
   activated() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
   },
   deactivated() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
+    this.destroyListener()
   },
   methods: {
-    $_resizeHandler() {
-      return debounce(() => {
-        if (this.chart) {
-          this.chart.resize()
-        }
-      }, 100)()
-    },
-    $_initResizeEvent() {
-      window.addEventListener('resize', this.$_resizeHandler)
-    },
-    $_destroyResizeEvent() {
-      window.removeEventListener('resize', this.$_resizeHandler)
-    },
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
     $_sidebarResizeHandler(e) {
       if (e.propertyName === 'width') {
         this.$_resizeHandler()
       }
     },
-    $_initSidebarResizeEvent() {
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
       this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
       this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
     },
-    $_destroySidebarResizeEvent() {
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
       this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
     }
   }
 }