1、父组件和单个子组件中使用window.onresize问题

子组件中的会没有作用,解决办法:在子组件中使用addEventListener("resize",callback)替代(可参考https://blog.csdn.net/believet93/article/details/107255405

2、父组件和多个子组件时,方案1的办法也不能奏效

解决办法:在父组件中监听window.onresize方法,并设置一个变量(resize),然后在子组件中监听变量(resize)的变化

// 父组件中监听窗口大小改变,并保存在vuex的状态管理器中
mounted() {
    window.onresize = () => {
      // 窗口大小变化
      this.$store.dispatch(
        "setResize",
        document.body.clientHeight + document.body.clientWidth
      );
    }
}

在子组件中获取resize

  computed: {
    // 窗口大小
    size: function () {
      // 获取父组件中设置的resize变量
      return this.$store.state.resize;
    },
  },

  watch: {
    // 窗口大小改变时重绘echarts图形,调用echarts两次resize方法是为了解决
    // 点击浏览器最大最小化按钮时echarts图形没有按照预期的
    size: function (nv,ov) {
      this.chart.resize();
      setTimeout(() => {
        this.chart.resize();
      }, 50);
    }
  }

 

Logo

前往低代码交流专区

更多推荐