526互联

vue监听浏览器窗口大小变化,做对应的操作

发布时间 2023-05-31 13:10:06作者: 土小狗

页面初始化mounted的时候，通过document.body.clientWidth和document.body.clientHeight获取到浏览器的宽和高，然后通过 window.onresize 来监听浏览器窗口的变化，在这里来改变我们的变量宽和高即可。
（created()的时候不行，因为此时document还没有生成）

<template>
  <section class="p-10">
    <h1> {{ screenWidth }} × {{ screenHeight }} </h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        screenWidth: '',
        screenHeight: ''
      };
    },
    mounted() {
      this.screenWidth = document.body.clientWidth;
      this.screenHeight = document.body.clientHeight;
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth;
          this.screenHeight = document.body.clientHeight;
        })();
      };
    }
  }
</script>

<style lang="scss">
</style>