修复charts切换侧边栏或者缩放窗口显示bug

This commit is contained in:
RuoYi 2020-03-15 20:07:14 +08:00
parent 56339214b6
commit bc65e59fcb
1 changed files with 30 additions and 26 deletions

View File

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