resize事件与响应式布局

最新推荐文章于 2024-01-27 12:54:20 发布

Love_vermouth

最新推荐文章于 2024-01-27 12:54:20 发布

阅读量994

点赞数

分类专栏： vue 文章标签： vue resize echarts

本文链接：https://blog.csdn.net/u010238381/article/details/81100346

版权

本文探讨了在Vue应用中，当菜单栏收缩或展开但窗口大小不变时，如何处理Echarts图表的响应式布局问题。通过使用eventBus，在组件改变状态时触发响应式更新，而不是依赖于window的resize事件。

摘要由CSDN通过智能技术生成

我们常常遇到这样的需求，菜单栏可以收缩或者展开，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) {