Vue - 实时监听浏览器窗口宽高变化

最新推荐文章于 2023-09-07 09:11:02 发布
最新推荐文章于 2023-09-07 09:11:02 发布
阅读量6.4k 收藏 8
点赞数 4
分类专栏： + Vue + Vue2 开发问题汇总
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/117445829
版权
+ Vue 同时被 2 个专栏收录
250 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue2 开发问题汇总
112 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了在Vue中如何实现实时监听浏览器窗口宽度和高度的变化，以适应不同屏幕大小，通过在生命周期钩子中获取窗口尺寸并使用事件监听器更新相关变量。

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

前言

有时页面需要根据浏览器宽高进行样式或逻辑的变化，这时候就需要 实时 获取浏览器窗口宽高。

解决方案

在生命周期钩子函数 mounted() 中通过 document.body.clientWidth | document.body.clientHeight 获取浏览器宽高，然后通过 window.onresize 监听浏览器窗口变化，当变化时修改 data() 变量来实现。

<template>
  <div>
  	<</
了解本专栏 订阅专栏 解锁全文
如何监听浏览器窗口大小变化？
王铁柱666的博客
04-16 240
在前端开发中，监听浏览器窗口大小变化是一个常见的需求，通常用于实现响应式设计或动态调整页面元素。
vue通过监听浏览器窗口的变化让echarts自适应浏览器
lannieZ的博客
03-19 815
data() { clientWidth: document.body.clientWidth }, watch: { flashMin(val, oldVal) { console.log(val, oldVal) if (val) { this.timer1 = setInterval(() => { this.socialSecurityParticipationRatio() }, val)
vue实现监听浏览器宽高的方法，可用于页面适配
m0_64207574的博客
07-07 2091
vue实现监听浏览器宽高的方法，可用于页面适配
vue监听浏览器窗口的变化，随着窗口变化调整滚动容器高度
weixin_42549581的博客
10-18 869
组件 <template> <div class="scroll-bar-box" :style="{height:styles.height,padding:styles.padding}"> <slot></slot> </div> </template> <script> export default...
vue监听获取浏览器宽度（clientWidth）
weixin_43923808的博客
05-16 1258
【代码】vue监听获取浏览器宽度（clientWidth）
vue监听浏览器窗口的宽度 高度
Call_me_small_pure的博客
06-05 4503
mounted() { window.onresize = () => { return (() => { this.screenWidth = document.body.clientWidth; console.log(this.screenWidth) ...
vue学习之监听浏览器宽度
King的博客
08-07 2343
vue组件中动态获取浏览器宽度
浅谈VUE监听窗口变化事件的问题
08-27
标题中提到的“VUE监听窗口变化事件”，其实是指在Vue.js框架下，如何监测和响应浏览器窗口尺寸的变化。在Vue.js开发过程中，可能会需要根据窗口的尺寸调整页面布局或者执行其他操作，例如让一个画布(canvas)元素...
vue监听浏览器窗口变化动态设置高度
果栋的博客
09-07 834
/ 获取页面滚动高度。//绑定页面滚动事件。// 重新赋值最新窗口数据。
vue项目如何监听窗口变化
weixin_43550562的博客
03-01 2670
获取窗口宽度：document.body.clientWidth 监听窗口变化：window.onresize 同时回顾一下JS里这些方法： 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document....
JavaScript--监听浏览器窗口高度变化，并设置超出部分显示滚动条(完整代码)
weixin_45406850的博客
02-16 4649
【代码】JavaScript--监听浏览器窗口高度变化，并设置超出部分显示滚动条(完整代码)
前端：监听浏览器窗口发生变化，并获取dom元素的高度
weixin_50236973的博客
11-17 703
【代码】前端：监听浏览器窗口发生变化，并获取dom元素的高度。
监听浏览器窗口大小做一些事情
weixin_44754351的博客
12-04 315
mounted() { window.onresize = function() { console.log('Still moving under gunfire…') } this.addBus() this.initCallCenter() },
Vue2监听当前窗口大小的变化
zhangningga的博客
08-17 1321
export default { data() { return { screenWidth: '', screenHeight: '' }; }, mounted() { this.screenWidth = document.body.clientWidth; this.screenHeight = document.body.clientHeight; window.onresi...
js添加事件attachEvent和addEventListener的用法
自由的风
07-04 478
一般我们在JS中添加事件,是这样子的view source  1 obj.onclick=method这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?view source  1 obj.onclick=method1;2 obj.onclick=method2;3 obj.onclick=method3;如果这样写,那么只有最后绑定的事件,这里是method3会被...
监听屏幕的高度和宽度，缩放时监控
aitengteng1的博客
07-08 588
watch: { 'screenWidth':function (val) { console.log('ssaa', val) // 计算屏幕宽度 let height=document.body.scrollWidth - 500; this.mapHeight=height +'px'; } }, mounted(){ this.roadMap() this.$api.commonsupAPI.findChildr
vue 监听浏览器窗口宽度变化
真爱一生的博客
01-25 2691
首先在data中定义要监听的属性，因为watch侦听器监听的是data中的属性,不能直接监听window export default { data () { return { screenWidth: document.body.clientWidth, } } } 在mouted当中调用window监听resize事件会在窗口或框架被调整大小时触发 mounted(){ let that = this; window.addEventListener(“resize”, function() { ret
vue监听浏览器尺寸变化
qq_34716929的博客
12-06 5155
1.在data中定义一个变量，用于记录屏幕尺寸； 且做好定义为 null2.使用 window.onresize 方法获取屏幕尺寸； 需要在 created() 中3.使用 watch 方法即可实时监听屏幕尺寸； 搞定！
vue监听浏览器窗口变化
最新发布
07-24
Vue.js 是一种流行的前端框架，它提供了一种高效的方式来创建动态网页应用。Vue 支持在组件中监听各种事件和属性的变化，这其中就包括监听浏览器窗口的状态改变，比如大小变化、位置变化、方向变化等。这通常是通过 `watch` 对象来完成的。 下面是一个简单的例子说明如何使用 Vue 来监听并响应浏览器窗口的变化： 首先，在 Vue 实例或组件的 `data` 属性中定义一些依赖于窗口状态的数据变量。例如，我们想实时更新一个数据变量，反映当前浏览器窗口的宽度： ```html <template> <div id="app"> 现在的窗口宽度是：{{ currentWindowWidth }} </div> </template> <script> export default { name: 'App', data() { return { currentWindowWidth: null, }; }, mounted() { // 初始化加载时设置窗口宽度 this.$nextTick(() => { this.updateWindowSize(); }); // 监听窗口变化 window.addEventListener('resize', this.updateWindowSize); }, beforeDestroy() { // 在组件销毁前移除事件监听 window.removeEventListener('resize', this.updateWindowSize); }, methods: { updateWindowSize() { this.currentWindowWidth = window.innerWidth; } } }; </script> <style scoped> #app { font-family: Avenir, Helvetica, Arial, sans-serif; } </style> ``` 在这个例子中： 1. **初始化加载**：在组件挂载到 DOM 上之后立即读取窗口的初始宽度并赋值给 `currentWindowWidth`。 2. **添加事件监听**：使用 `window.addEventListener('resize', this.updateWindowSize);` 添加了一个事件监听器，当浏览器窗口大小发生变化时，会触发 `updateWindowSize` 方法。 3. **处理事件**：在 `updateWindowSize` 方法内部，我们简单地将 `window.innerWidth` 赋值给了 `this.currentWindowWidth`，使得 `currentWindowWidth` 随着窗口大小的变化而动态更新。 4. **清理监听**：在组件销毁之前，我们需要清除掉先前添加的事件监听器，以免导致内存泄漏。 这样，当你调整浏览器窗口大小时，页面上显示的 “现在的窗口宽度” 就会即时更新，反映出新的窗口宽度值。这对于实现响应式设计或是基于窗口大小条件的不同交互逻辑非常有用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值