vue监听浏览器窗口大小变化

Fxhani

于 2020-07-13 16:26:15 发布

阅读量2.1k

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/Fxhani/article/details/107319593

版权

本文详细介绍如何在Vue项目中实现屏幕宽度的自适应。首先在data中定义宽度属性并设置默认值，接着在mounted生命周期钩子中监听窗口大小变化并更新属性值，最后使用watch监听属性变化确保实时响应。

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

第一步

先在 data 中去定义一个宽度属性

data: {
	  screenWidth: document.body.clientWidth   // 这里是给到了一个默认值 （这个很重要）
}

第二步

在 vue mounted 的时候去挂载一下它的方法

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

第三步

watch 去监听这个属性值的变化，如果发生变化则讲这个val 传递给 this.screenWidth

watch: {
  screenWidth (val) {
        this.screenWidth = val
    }
}