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