window.onresize在vue項目中的運用

<template>
  <el-container>
    <el-main>
      <div class="content">

        <router-view/>

      </div>
    </el-main>
  </el-container>
</template>
<script>

export default {
  name: "index",
  mounted() {
    let _this = this;
    _this.setPageH()
    window.onresize = () => {
      return (() => {
       _this.setPageH()
      })()
    }
  },
  methods: {
    setPageH() {
      const h = $(window).height()
      $('.el-container').css({'min-height': h})
    }
  }
}
</script>

監聽界面大小發生變化

常在做官網時首頁設置某div的高度

在界面變化縮放時重新設置echarts的尺寸

注意：

1.window.onresize事件一般放在created或者mounted生命周期中，這樣界面改變是能觸發。

2.window.onresize中的this指向的是window，不是指向vue，如果需要調用methods中的函數，需要在window.onresize事件的前面把指向vue的this賦值給其他字符，比如"_this"。

3.window.onresize是全局事件，在其他頁面改變界面時也會執行，若僅僅是該頁面需要，那么需要在頁面銷毀時清除事件。

//注銷window.onresize事件
destroyed(){
  window.onresize = null;
}