57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
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();
|
|
}
|
|
}
|
|
};
|