vue项目监听浏览器窗口大小发生变化触发事件

 

在mounted中写下：

在页面初始化时，window.onresize 来监听浏览器窗口的变化。在变化时，调用函数，或者直接写业务逻辑。

 window.onresize = () => {
      return (() => {
        this.$nextTick(() => {
          this.headHeight();
        });
      })();
    };

(created()的时候不行，因为此时document还没有生成)

在methods中写下：

可以使用js内置的window、document等相关函数获取页面或者盒子的尺寸。

    headHeight() {
      // 页面可视高度
      let pageInnerHeight = window.innerHeight;// 搜索框高度
      let divOffsetHeight =
        document.getElementsByClassName("divStyle")[0].offsetHeight;

      console.log(pageInnerHeight, divOffsetHeight);
    },
  },