You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.4 KiB
56 lines
1.4 KiB
import { debounce } from '@/utils' |
|
|
|
export default { |
|
data() { |
|
return { |
|
$_sidebarElm: null, |
|
$_resizeHandler: null |
|
} |
|
}, |
|
mounted() { |
|
this.initListener() |
|
}, |
|
activated() { |
|
if (!this.$_resizeHandler) { |
|
// avoid duplication init |
|
this.initListener() |
|
} |
|
|
|
// when keep-alive chart activated, auto resize |
|
this.resize() |
|
}, |
|
beforeDestroy() { |
|
this.destroyListener() |
|
}, |
|
deactivated() { |
|
this.destroyListener() |
|
}, |
|
methods: { |
|
// use $_ for mixins properties |
|
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential |
|
$_sidebarResizeHandler(e) { |
|
if (e.propertyName === 'width') { |
|
this.$_resizeHandler() |
|
} |
|
}, |
|
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) |
|
}, |
|
destroyListener() { |
|
window.removeEventListener('resize', this.$_resizeHandler) |
|
this.$_resizeHandler = null |
|
|
|
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) |
|
}, |
|
resize() { |
|
const { chart } = this |
|
chart && chart.resize() |
|
} |
|
} |
|
}
|
|
|