vue项目监听浏览器窗口大小发生变化触发事件

简介: 笔记

在mounted中写下:

在页面初始化时,window.onresize 来监听浏览器窗口的变化。在变化时,调用函数,或者直接写业务逻辑。

window.onresize = () => {
      return (() => {
        this.$nextTick(() => {
          this.headHeight();
        });
      })();
    };

(created()的时候不行,因为此时document还没有生成)

在methods中写下:

可以使用js内置的window、document等相关函数获取页面或者盒子的尺寸。

headHeight() {
      // 页面可视高度
      let pageInnerHeight = window.innerHeight;// 搜索框高度
      let divOffsetHeight =
        document.getElementsByClassName("divStyle")[0].offsetHeight;
      console.log(pageInnerHeight, divOffsetHeight);
    },
  },
目录
相关文章
|
JavaScript API
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件,包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
192 0
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
JavaScript
VUE中el-input阻止冒泡防止触发父级事件
VUE中el-input阻止冒泡防止触发父级事件
613 130
|
存储 人工智能 数据库
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
Codel是一款全自主AI代理工具,支持在终端、浏览器和编辑器中执行复杂任务和项目。它运行在沙盒化的Docker环境中,具备自主操作能力,内置浏览器和文本编辑器,所有操作记录存储于PostgreSQL数据库。Codel能够自动完成复杂任务,如创建项目结构、进行网络搜索等,适用于自动化编程、研究与开发、教育与培训以及数据科学与分析等多个领域。
378 11
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
3853 2
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
740 0
|
JavaScript
Vue——vue2监听元素style变化
Vue——vue2监听元素style变化
182 2
|
开发框架 JavaScript 前端开发
手把手教你剖析vue响应式原理,监听数据不再迷茫
该文章深入剖析了Vue.js的响应式原理,特别是如何利用`Object.defineProperty()`来实现数据变化的监听,并探讨了其在异步接口数据处理中的应用。