diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js index c4c432f4..dccaf1a8 100644 --- a/src/components/Charts/mixins/resize.js +++ b/src/components/Charts/mixins/resize.js @@ -3,7 +3,7 @@ import { debounce } from '@/utils' export default { data() { return { - sidebarElm: null + $_sidebarElm: null } }, mounted() { @@ -14,16 +14,18 @@ export default { }, 100) window.addEventListener('resize', this.__resizeHandler) - this.sidebarElm = document.getElementsByClassName('sidebar-container')[0] - this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) + this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] + this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) }, beforeDestroy() { window.removeEventListener('resize', this.__resizeHandler) - this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) + this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) }, methods: { - sidebarResizeHandler(e) { + // use $_ for mixins properties + // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential + $_sidebarResizeHandler(e) { if (e.propertyName === 'width') { this.__resizeHandler() } diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js index 65879d16..e8d0df8c 100644 --- a/src/layout/mixin/ResizeHandler.js +++ b/src/layout/mixin/ResizeHandler.js @@ -12,26 +12,28 @@ export default { } }, beforeMount() { - window.addEventListener('resize', this.resizeHandler) + window.addEventListener('resize', this.$_resizeHandler) }, beforeDestroy() { - window.removeEventListener('resize', this.resizeHandler) + window.removeEventListener('resize', this.$_resizeHandler) }, mounted() { - const isMobile = this.isMobile() + const isMobile = this.$_isMobile() if (isMobile) { store.dispatch('app/toggleDevice', 'mobile') store.dispatch('app/closeSideBar', { withoutAnimation: true }) } }, methods: { - isMobile() { + // use $_ for mixins properties + // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential + $_isMobile() { const rect = body.getBoundingClientRect() return rect.width - 1 < WIDTH }, - resizeHandler() { + $_resizeHandler() { if (!document.hidden) { - const isMobile = this.isMobile() + const isMobile = this.$_isMobile() store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop') if (isMobile) {