| 提交 | 用户 | 时间 | ||
| fd2207 | 1 | import { debounce } from '@/utils' |
| 懒 | 2 | |
| 3 | export default { | |
| 4 | data() { | |
| 5 | return { | |
| 6 | $_sidebarElm: null, | |
| 7 | $_resizeHandler: null | |
| 8 | } | |
| 9 | }, | |
| 10 | mounted() { | |
| 11 | this.initListener() | |
| 12 | }, | |
| 13 | activated() { | |
| 14 | if (!this.$_resizeHandler) { | |
| 15 | // avoid duplication init | |
| 16 | this.initListener() | |
| 17 | } | |
| 18 | ||
| 19 | // when keep-alive chart activated, auto resize | |
| 20 | this.resize() | |
| 21 | }, | |
| 22 | beforeDestroy() { | |
| 23 | this.destroyListener() | |
| 24 | }, | |
| 25 | deactivated() { | |
| 26 | this.destroyListener() | |
| 27 | }, | |
| 28 | methods: { | |
| 29 | // use $_ for mixins properties | |
| 30 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential | |
| 31 | $_sidebarResizeHandler(e) { | |
| 32 | if (e.propertyName === 'width') { | |
| 33 | this.$_resizeHandler() | |
| 34 | } | |
| 35 | }, | |
| 36 | initListener() { | |
| 37 | this.$_resizeHandler = debounce(() => { | |
| 38 | this.resize() | |
| 39 | }, 100) | |
| 40 | window.addEventListener('resize', this.$_resizeHandler) | |
| 41 | ||
| 42 | this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] | |
| 43 | this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) | |
| 44 | }, | |
| 45 | destroyListener() { | |
| 46 | window.removeEventListener('resize', this.$_resizeHandler) | |
| 47 | this.$_resizeHandler = null | |
| 48 | ||
| 49 | this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) | |
| 50 | }, | |
| 51 | resize() { | |
| 52 | const { chart } = this | |
| 53 | chart && chart.resize() | |
| 54 | } | |
| 55 | } | |
| 56 | } | |
