zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix[Charts]: fix charts resize in keep-alive bug (#2922) 

* fix[Charts]: fix charts resize in keep-alive bug

* refine
This commit is contained in:
花裤衩 2020-01-09 16:49:57 +08:00
parent ea27da43b7
commit 95561d4977
1 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Charts/mixins/resize.js
View File

@ -3,32 +3,54 @@ import { debounce } from '@/utils'
export default { export default {
data() { data() {
return { return {
$_sidebarElm: null $_sidebarElm: null,
$_resizeHandler: null
} }
}, },
mounted() { mounted() {
this.__resizeHandler = debounce(() => { this.initListener()
if (this.chart) { },
this.chart.resize() activated() {
if (!this.$_resizeHandler) {
// avoid duplication init
this.initListener()
} }
}, 100)
window.addEventListener('resize', this.__resizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] // when keep-alive chart activated, auto resize
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) this.resize()
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener('resize', this.__resizeHandler) this.destroyListener()
},
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) deactivated() {
this.destroyListener()
}, },
methods: { methods: {
// use $_ for mixins properties // use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_sidebarResizeHandler(e) { $_sidebarResizeHandler(e) {
if (e.propertyName === 'width') { if (e.propertyName === 'width') {
this.__resizeHandler() 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()
} }
} }
} }