Vue 实时监听窗口变化 windowresize的两种方法

最新推荐文章于 2023-12-29 09:50:42 发布
原创 最新推荐文章于 2023-12-29 09:50:42 发布 · 1.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Vue中实时监听窗口大小变化的两种方法：一种是通过定义变量、在mounted生命周期钩子中绑定并使用watch监听；另一种是在Vue 2.x中直接在mounted中挂载window.onresize事件进行全局监听。

方法一：

1.定义变量

1

2

3

4

5

data(){

  return{

     formWidth : '123px'

  }

},

2.根据生命周期 在mounted 中绑定 窗口变化

1

2

3

4

5

6

7

8

9

mounted(){

      const that = this

      window.onresize = () => {

        return (() => {

         window.screenWidth = document.body.clientWidth

         that.screenWidth = window.screenWidth

        })()

      }

},

3:   绑定监听 watch

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

watch: {

       screenWidth (val) {

            if (!this.timer) {

              this.screenWidth = val

              this.timer = true

              let that = this

              setTimeout(function () {

                // that.screenWidth = that.$store.state.canvasWidth

                console.log(that.screenWidth)

                // that.init()

                that.timer = false

              }, 400)

            }

       }

 },

方法二：在vue.2x里面时候，mounted 里面可以直接挂载 window.onresize事件。全局监听

1

2

3

4

5

6

7

8

mounted(){

       window.onresize = () => {

         return (() => {

           this.handleWidth();

         })()

       }

       this.handleWidth();

},

完全可以做到检测窗口变化

Vue运用之resize监听窗口变化
日常笔记/总结/系列知识梳理
08-10 5万+
一、在Vue单个页面运用 <template> <div id="divId"> </div> </template> <script> export default { data() {
关于vue 结合原生js 解决echarts resize问题
11-20
2. **监听窗口resize事件**：浏览器提供了一个`resize`事件，可以监听窗口尺寸的变化。在Vue组件中，我们可以添加事件监听器，当窗口大小改变时，触发ECharts的`resize`方法： ```javascript window....
VueJs监听window.resize方法示例
10-18
本篇文章主要介绍了VueJs监听window.resize方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue监听window.resize方法
qq_35410544的博客
03-30 807
<template> <div id="app"> <div :style="{width: `${screenWidth}px`}"> <router-view/> </div> </div> </template> <script> export defaul...
vue监听window.resize
forteenBrother的博客
04-19 2103
1.问题 今天在项目中遇到一个问题，使用eCharts图表时，在窗口改变大小时，需要重新渲染图表，我将eCharts封装成了组件，在组件中监听window.onresize，但是效果却不与预期相符，一个页面中有多个eChart组件，但是只有最后一个组件的监听生效，其他的都没有生效。 但是这个插件是我从之前的项目中直接拿过来用的，唯一不同的地方是，之前的项目引入了jQquary，监听使用$(wi...
Vue 监听 window.resize
司马懿的西山居
04-08 3055
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;Vue中绑定全局事件onresize&lt;/title&gt; &lt;meta name="viewport" con
vue3 监听resize窗口事件,离开页面要销毁窗口事件。
weixin_46409887的博客
02-14 1万+
vue3 监听resize窗口事件,频繁触发的bug解决。
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
11-19
在Vuex中，可以创建一个`resize`的state，然后在每个需要监听窗口变化的组件中，通过`mapState`或`computed`属性获取这个状态，并使用`watch`进行监听。 ```javascript // Vuex store state: { resize: null }, ...
VueJs 监听 window.resize 方法---窗口变化
热门推荐
小小码农披荆斩棘的博客
08-14 9万+
Vuejs监听 window 事件 window.resize
vue项目，全局指令v-resize ，Window大小变化回调指令
weixin_45195355的博客
12-29 1197
directive.js文件。resize.js文件。main.js 中引入。
VueJs 监听 window.resize 方法
ankuailan3925的博客
01-22 588
Vuejs 本身就是一个 MVVM 的框架。 但是在监听 window 上的 事件 时，往往会显得 力不从心。 比如 这次是 window.resize 恩，我做之前也是百度了一下。看到大家伙都为这个问题而发愁。 问题： 今天我也 遇到了这样一个问题， 是关于canvas 自适应。 根据窗口的变化去变化 canvas 的宽度 备注： 重要的问题说三遍 解决 框架内的bug 先说 框架 版...
在 vue 中使用 window.onresize及div的resize事件
alxw2010的博客
05-12 4529
项目场景： 如何在 vue 中使用 window.onresize 如何避免 覆盖其它的 window.onresize echarts 监听图表容器的大小并改变图表大小 解决方案： <script> /* echarts 监听图表容器的大小并改变图表大小 */ export default { mounted() { this.myChart = this.$echarts.init(this.$refs.canvas) // 监听 window.onresize
【vue】vue监听挂在在window对象上某一个变量的改变
weixin_51083890的博客
09-13 4142
通过使用Vue的自定义事件机制，我们可以监听window上某个变量的改变，以便在变量发生变化时执行相应的操作。这种方法适用于需要监听window对象上的全局变量改变的场景。在项目中使用这种方法可以更好地控制全局状态的变化，并且使各个组件之间能够实时响应变化。同时，这种方法也使得代码更具可读性和可维护性。希望这篇文章对你在Vue中监听window上某个变量的改变有所帮助。祝你编写愉快！
Vue监听window.resize
weixin_42684309的博客
08-02 303
最近在开发微信公众号的时候发现了一个安卓兼容性问题。 大家都知道IOS在input框获取焦点的时候会弹起软键盘，点击完成input会自动失去焦点，但是安卓不能。在微信浏览器中会发现给footer添加了position:fixed之后安卓机会出现软键盘将footer顶起的现象。这时我想到的第一解决方案就是监听软键盘事件。 于是我决定通过监听页面的可是高度的变化，控制footer的position...
vue中监听window.resize的变化
aoyi2760的博客
12-21 549
我只想说每个人遇到的bug真的不能一概而论，解决办法也会有不同。在vue中使用echarts的时候，会想要实现window.resize窗体变化大小的时候让图形大小跟着变化。实现的过程中各种bug，也真的让人有种想要发狂的感觉。但是还好，最后在不断的查资料和尝试当中。实现了想要的效果，仅供参考： 首先我这里实现的效果是切换echart图形，然后在window.re...
vue3 监听页面宽度变化
最新发布
01-15
### 使用 `ResizeObserver` 和窗口事件监听器实现页面宽度变化 在 Vue 3 中，可以采用多种方式来监听页面宽度的变化并据此调整组件的行为或样式。以下是两种常用的方法： #### 方法一：使用原生 JavaScript 的 `window.addEventListener` 通过监听浏览器窗口大小的变化，在每次窗口尺寸发生变化时触发回调函数，从而更新组件的状态。 ```javascript <template> <div class="container"> <!-- 组件模板 --> </div> </template> <script setup> import { ref, onMounted, onUnmounted } from 'vue'; const windowWidth = ref(window.innerWidth); function handleResize() { windowWidth.value = window.innerWidth; } onMounted(() => { window.addEventListener('resize', handleResize); }); onUnmounted(() => { window.removeEventListener('resize', handleResize); }); </script> <style scoped> /* 样式 */ .container { /* 动态设置最大宽度或其他样式 */ } </style> ``` 这种方法简单易懂，适合大多数场景下监控整个页面的宽度变化[^2]。 #### 方法二：使用 `ResizeObserver` API 来监测特定 DOM 元素的尺寸变动 对于需要精确跟踪某个具体容器（如 `.content-box`）宽高的情况，则推荐使用 `ResizeObserver` 接口。此接口允许开发者观察目标元素的内容矩形何时发生了更改，并相应地作出反应。 ```html <div id="app"> <div :class="{ narrow: isNarrow }" ref="targetElement"></div> </div> ``` ```javascript export default { data() { return { observer: null, isNarrow: false, }; }, mounted() { const resizeObserver = new ResizeObserver((entries) => { entries.forEach(entry => { if (entry.contentRect.width < 768) { this.isNarrow = true; } else { this.isNarrow = false; } }); }); resizeObserver.observe(this.$refs.targetElement); // 存储observer以便稍后移除 this.observer = resizeObserver; }, unmounted() { // 清理资源 if (this.observer && this.$refs.targetElement) { this.observer.unobserve(this.$refs.targetElement); } } }; ``` 上述代码展示了如何创建一个 `ResizeObserver` 实例去监视指定元素(`ref="targetElement"`), 并基于其实际宽度决定是否应用额外类名`.narrow`,进而影响视觉效果[^4]. 这两种方案都能很好地满足不同层次的需求——前者适用于全局性的布局调整；后者则更适合局部区域内的精细控制。选择哪种取决于项目的具体情况和个人偏好。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值