vue窗口大小实时监听

最新推荐文章于 2024-06-20 14:45:30 发布

酷jjs

最新推荐文章于 2024-06-20 14:45:30 发布

阅读量1.8k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_32584661/article/details/105410540

版权

VUE 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<div class="leftBox" :style="{width:wrapBox.leftWidth+'px'}">
左侧部分
</div>

<div class="rightBox" :style="{width:wrapBox.rightWidth+'px'}">
右侧部分
</div>

 data() {
      return {
        wrapBox: {
          leftWidth: 250,
          rightWidth: 500,  //自适应        
        },

      }
    },

 mounted() {
      /* 右侧部分根据左侧宽度自适应 */
      this.wrapBox.rightWidth = this.$refs.bottomBox.offsetWidth - this.wrapBox.leftWidth;

      /* 窗口大小实时监听 */
      this.screenWidth = document.body.clientWidth;
      this.screenHeight = document.body.clientHeight;
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth;
          this.screenHeight = document.body.clientHeight;
          this.wrapBox.rightWidth = this.screenWidth - this.wrapBox.leftWidth;
        })()
      }

    },