resize事件与响应式布局

我们常常遇到这样的需求，菜单栏可以收缩或者展开，main部分的图表要随着响应式变化。

你应该会想到监听window的resize事件，但这可能仍然无法使一些图表做响应式改变。因为只是收缩/展开菜单栏，窗口的大小并没有发生变化，即并没有触发window的resize事件。

下面讲述一下我自己的处理方式，如果你们有更好的方式，欢迎留言讨论。

vue + echarts      vue 使用 eventBus

1、在组件手动改变菜单栏收缩/展开状态时

<script>
    data () {
        return {
           shrink: document.documentElement.clientWidth < 768?true: false  //控制左侧栏的折叠与展开
        }
    },
    methods: {
        toggleClick () {
             this.shrink = !this.shrink;
             this.$bus.$emit('toggleClick');
        }
    },
    mounted () {
        this.init();
        let vm = this;
        window.addEventListener('resize', function () {
              let winWidth = document.documentElement.clientWidth;
              if(winWidth < 768) {
                    vm.shrink = true;
              }
        });
    }
</script>

2、需要做响应式改变的组件

以下是部分关键代码

<template>
    <div style="width:100%;height:328px;" id="alarm-status"></div>
</template>


<script>
export default {
    name: 'alarm-status',
    data() {
        return {
            interval: null,
            alarmStatus: null
        }
    },
    props: {
        delay: Number
    },
    methods: {
       handleShinkChange() {
           let vm = this;
           if (this.alarmStatus != null) {
                setTimeout(() => {
                    vm.alarmStatus.resize();
                }, 120)
            }
        }
    },
    created() {
        this.$bus.$on('toggleClick', this.handleShinkChange);
    },
    mounted() {
        let vm = this;
        this.$nextTick(() => {
            vm.alarmStatus = echarts.init(document.getElementById('alarm-status'));
            vm.alarmStatus.setOption(option);

            vm.getAlarmCount();

            vm.interval = setInterval(() => {
                vm.getAlarmCount();
            }, vm.delay);

            window.addEventListener('resize', function () {
                // 注意此处的this指向window
                vm.alarmStatus.resize();
            });
        })
    },
    beforeDestroy() {
        clearInterval(this.interval);
        this.$bus.$off('toggleClick', this.handleShinkChange);
    }
}
</script>