VUE监听resize

原创已于 2022-06-24 11:01:47 修改 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2020-12-22 13:38:00 首次发布

VUE 同时被 2 个专栏收录

26 篇文章

订阅专栏

分辨率兼容的精益求精

4 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单自适应高度的DIV组件案例。该组件能够根据浏览器窗口大小的变化调整自身的高度，并通过监听窗口尺寸变化来实时更新高度值。

<div class="bg"
   :style="{'height':windowHeight+'px'}">
  pc端页面
</div>

data () {
    return {
      windowHeight: window.innerHeight
    }
}

mounted () {
    window.onresize = () => {
      this.windowHeight = window.innerHeight
    }
}

watch: {
  'windowHeight': function (newVal, oldVal) { //监听屏幕宽度变化
    this.windowHeight = newVal
    console.log(newVal)
  }
}