vue中watch监听浏览器窗口大小的改变

最新推荐文章于 2025-06-05 12:09:19 发布

云烟溪雪

最新推荐文章于 2025-06-05 12:09:19 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/wxl1390/article/details/111579155

vue 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种在Vue.js中实时监测屏幕宽度变化的方法。通过组合使用data属性、watch监听及window.onresize事件，实现对窗口尺寸变化的响应式更新。

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

<script>

export default {
  data() {
    return {
      screenWidth: document.body.clientWidth
    };
  },
  watch: {
    screenWidth(newVal) {
      console.log('newVal', newVal);
      // console.log('old', old);
      // this.boxWscreenWidthidth = document.body.clientWidth;
      // console.log('new', this.boxWidth);
    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      window.screenWidth = document.body.clientWidth;
      that.screenWidth = window.screenWidth;
    };
    // console.log('that.screenWidth',that.screenWidth)
  }
};
</script>