vue监听窗口变化

工作备忘录

于 2022-02-17 17:10:11 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yoyoyo8888/article/details/122987505

本文档介绍了如何使用JavaScript和Vue监听窗口大小变化，实时更新屏幕宽度和高度，并针对窗口尺寸变化实现动态布局调整的Vue组件实例。

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

data () {
  return {
    screenWidth: document.body.clientWidth,  //屏幕可视区宽度
    screenHeight: document.body.clientHeight //屏幕高度
  }
},
mounted () {
      // 监听窗口变化
      let _this = this
      window.addEventListener('resize',function () {
         _this.screenWidth = document.body.clientWidth;
         _this.screenHeight = document.body.clientHeight; 
      })       
  },
watch: {
      // 窗口宽度改变
      screenWidth(n,o){
          
      }, 
      // 窗口高度改变
      screenHeight(n,o){
         
      }
},