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