vue监听浏览器窗口大小变化,做对应的操作

最新推荐文章于 2024-08-06 17:44:12 发布
最新推荐文章于 2024-08-06 17:44:12 发布
阅读量6.8k 收藏 10
点赞数 4
分类专栏： 日常问题记录 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzz00008LN/article/details/115563647
版权
本文介绍如何在Vue应用中利用浏览器的resize事件监听窗口大小变化，并在尺寸改变时更新相应变量，以实现页面的响应式布局。创建时无法获取正确的文档尺寸，需在mounted阶段进行。
摘要由CSDN通过智能技术生成

页面初始化mounted的时候，通过document.body.clientWidth和document.body.clientHeight获取到浏览器的宽和高，然后通过 window.onresize 来监听浏览器窗口的变化，在这里来改变我们的变量宽和高即可。
（created()的时候不行，因为此时document还没有生成）

<template>
  <section class="p-10">
    <h1> {
   {
    screenWidth }} × {
   {
最低0.47元/天 解锁文章
一梦晓三生
关注
专栏目录
Vue监听浏览器窗口变化
who_become_gods的博客
03-24 952
<template> <section class="p-10"> <h1> {{ screenWidth }} × {{ screenHeight }} </h1> </section> </template> <script> export default { data() { ...
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
10-18
今天小编就为大家分享一篇Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 实时监听窗口变化 windowresize的两种方法
10-17
主要介绍了Vue 实时监听窗口变化 windowresize的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
【Vue】vue3 中使用 ResizeObserver 监听元素的尺寸宽度变化
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-06 641
要监听div宽度的变化，可以使用接口。允许你观察一个或多个元素的尺寸变化，并在发生变化时执行回调函数。这种方法比使用更专注于尺寸变化，且不受元素属性变化的影响。
Vue,js 监听window窗口尺寸变化
草木疏博客
10-26 9520
vue,js,window窗口尺寸变化
Vue监听浏览器窗口的变化
Gpointy的博客
07-26 4478
【代码】Vue监听浏览器窗口的变化。
vue实时监听窗口宽度变化
xiaoqin5的博客
07-20 2662
上面的方案每隔0.4秒会获取一次屏幕的宽度，并将宽度值赋值给data中的screenWide，就可以直接通过this.screenWide获取了。既然可以监听到窗口screenWidth值的变化，就可以根据这个值设定不同的自适应方案了！
学习使用js监测浏览器窗口大小变化
徊忆羽菲
06-06 1661
在JavaScript中，可以通过监听resize事件来检测浏览器窗口的大小变化。以下是一个简单的示例代码，用于检测浏览器窗口大小的变化并在控制台输出新的窗口尺寸：
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
09-04
在网页开发中，我们经常需要监听浏览器窗口大小的变化，以便动态调整页面元素的布局或尺寸。`resize`事件就是用于捕获这一行为的关键JavaScript事件。然而，当涉及到框架（frame）或者iframe时，直接在主页面中使用`...
vue 实现根据窗口大小自适应图片预览
weixin_50290666的博客
06-02 1717
使用计算属性实现图片预览场景，图片的大小根据视窗大小自适应变化。
javascript 浏览器窗口大小改变事件
03-26
NULL 博文链接：https://272426068.iteye.com/blog/1143976
vue监听dom大小改变案例
11-19
需求描述：layout左边菜单栏收缩，右边的content区域的swiper宽度没有改变（没有图，朋友的问题，大体画一下） 类似于点击折叠左边目录会变小，右边内容区域会变大，但是swiper在刚开始的时候就确定了宽度，所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了！！！！但是宽度确实是在改变的很费解，先说一下解决方法把 1、使用element-resize-detector var elementResizeDetectorMaker = require("element-resize-detector
使用vue.js在页面内组件监听scroll事件的方法
10-18
第二步：在Vue实例的`mounted`生命周期钩子中使用`this.$refs`获取到对应的DOM元素，并为该元素添加一个滚动事件监听器。这里需要注意的是，应该使用`this.box.addEventListener`来为DOM元素添加事件监听器，而不是`...
vue项目如何监听窗口变化
weixin_43550562的博客
03-01 1824
获取窗口宽度：document.body.clientWidth 监听窗口变化：window.onresize 同时回顾一下JS里这些方法： 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document....
vue监听浏览器窗口发生变化
qq_43651168的博客
10-21 2621
vue监听浏览器窗口发生变化
React监听浏览器窗口大小的改变
w319502537的博客
04-13 7609
React监听浏览器窗口大小的改变
监听浏览器窗口大小发生变化触发事件
weixin_30482383的博客
01-12 339
window.onresize = function(){ } 转载于:https://www.cnblogs.com/jddk/p/8274676.html
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
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值