vue组件页面高度根据屏幕大小自适应

最新推荐文章于 2025-05-26 08:21:02 发布

云凝汐辰

最新推荐文章于 2025-05-26 08:21:02 发布

阅读量3.3w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue屏幕自适应大小文章标签：屏幕自适应

本文链接：https://blog.youkuaiyun.com/qq_39865491/article/details/88050596

vue屏幕自适应大小专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用JavaScript监听浏览器窗口大小变化，并实时更新页面高度，确保页面布局响应式调整。通过在Vue组件中利用mounted钩子挂载onresize事件，实现屏幕宽度变化时的数据同步更新，有效避免页面卡顿。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)

我们将document.body.clientWidth赋值给data中自定义的变量：

 data:{
  screenHeight: document.body.clientHeight
}

在页面mounted时，挂载window.onresize方法：

mounted () {
  const that = this
  window.onresize = () => {
    return (() => {
       window.screenHeight = document.body.clientHeight
       that.screenHeight = window.screenHeight
    })()
  }
}

监听screenWidth属性值的变化，打印并观察screenWidth发生变化的值：

watch: {
      screenHeight (val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            // 打印screenWidth变化的值
            console.log(that.screenHeight)
            that.timer = false
          }, 400)
        }
      }
    }

最后别忘了在元素上赋值

<div :style="{ height: screenHeight + 'px' }">
	一段代码....
</div>