1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- import { debounce } from '@/utils'
- export default {
- data() {
- return {
- $_sidebarElm: null
- }
- },
- mounted() {
- this.$_initResizeEvent()
- this.$_initSidebarResizeEvent()
- },
- beforeDestroy() {
- this.$_destroyResizeEvent()
- this.$_destroySidebarResizeEvent()
- },
- // to fixed bug when cached by keep-alive
- // https://github.com/PanJiaChen/vue-element-admin/issues/2116
- activated() {
- this.$_initResizeEvent()
- this.$_initSidebarResizeEvent()
- },
- deactivated() {
- this.$_destroyResizeEvent()
- this.$_destroySidebarResizeEvent()
- },
- methods: {
- // use $_ for mixins properties
- // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
- $_resizeHandler() {
- return debounce(() => {
- if (this.chart) {
- this.chart.resize()
- }
- }, 100)()
- },
- $_initResizeEvent() {
- window.addEventListener('resize', this.$_resizeHandler)
- },
- $_destroyResizeEvent() {
- window.removeEventListener('resize', this.$_resizeHandler)
- },
- $_sidebarResizeHandler(e) {
- if (e.propertyName === 'width') {
- this.$_resizeHandler()
- }
- },
- $_initSidebarResizeEvent() {
- this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
- this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
- },
- $_destroySidebarResizeEvent() {
- this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
- }
- }
- }
|