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

403 阅读1分钟

在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);
    },
  },