[vue] 窗口缩放 window.addEventListener(‘resize‘,

最新推荐文章于 2024-05-16 14:22:31 发布
最新推荐文章于 2024-05-16 14:22:31 发布
阅读量3.5k 收藏 2
点赞数
分类专栏： # vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/125886321
版权 
 mounted() {
    this.onResize();
    window.addEventListener('resize', this.onResize);
  },
    

methods: {
    // 改变浏览器窗口的大小
    onResize() {
      console.log('处理窗口缩放时要处理的逻辑操作！');
    },
]

beforeDestroy() {
    // 移除绑定的onResize事件监听
    window.removeEventListener("resize",this.onResize);
}
533_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript窗口大小变化事件：window.resize
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
01-12 2011
JavaScript作为一种前端开发的关键性语言，为实现动态、交互性强的网页效果提供了有力的支持。其中，窗口调整事件 window.resize 在响应式设计和用户体验优化中扮演着重要的角色。通过监听窗口大小的变化，开发者可以动态调整页面布局、样式，以适应不同设备和屏幕尺寸，提供更好的用户体验。
vue实时监听屏幕的宽度和移除监听
qq_43235503的博客
08-17 723
vue实时监听屏幕的宽度和移除监听
VueJs监听window.resize方法示例
10-18
本篇文章主要介绍了VueJs监听window.resize方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue进阶（九十五）：addEventListener() 监听事件_vue addeventlistener(3)
最新发布
2401_84617477的博客
05-16 359
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
window.onresize与window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听
weixin_44490109的博客
02-23 2万+
目录一、背景二、`window.onresize`为什么在重复使用过程中会被覆盖？三、`window.addEventListener`的运用 一、背景 在做浏览器窗口监听时我们该选用window.onresize还是window.addEventListener('resize',...)呢？之前遇到过这样一种情况，在一个vue项目的navBar部份使用了window.onresize做了监听控制，当窗口缩放到一定大小以下时菜单只显示图标隐藏文字，后面由于在做表格时也需要去做监听以实现自适应策略，在实现的
window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听
coldriversnow的专栏
05-23 2505
（3）参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡。（2）参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。2）如果function参数传的不是匿名函数,可以使用removeEventListener来移除监听。（1）参数event必填，表示监听的事件，例如 click, resize等，不加前缀on的事件。1. addEventListener()添加事件监听。
window.onresize 与 window.addEventListener(‘resize‘)
Ranye的博客
04-18 331
前者会覆盖，后者是可以叠加。
Vue 实时监听窗口变化 windowresize的两种方法
10-17
主要介绍了Vue 实时监听窗口变化 windowresize的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
window.addEventListener来解决让一个js事件执行多个函数
12-09
这时就要用window.attachEvent和window.addEventListener来解决一下。 下面是一个解决方法。至于attachEvent和addEventListener的用法，可以自己Google或百度一下。 代码如下: if (document.all){ window....
解决vue 给window添加和移除resize事件遇到的坑
11-20
在vue项目中需要监听window窗口变化来时时计算图片的高度，于是就加了一个监听事件；确实监听到了，但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态，即移除监听事件并没有生效。 //之前...
window.onresize和window.addEventListener
weixin_43258184的博客
11-05 876
vue中在mounted中window.onresize不生效是因为： 引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。 把window.onresize改为window.addEventListener window.onresize = () => { if (screenfull.isFullscreen) { this.show = false; this.tableHeight = w
vue3 监听resize窗口事件,离开页面要销毁窗口事件。
weixin_46409887的博客
02-14 1万+
vue3 监听resize窗口事件,频繁触发的bug解决。
vue2实现浏览器大小变动页面缩放功能
菜鸡奋斗ing的博客
05-09 4970
在页面html部分获取元素对象（这个一般设置在页面div的第二层）。4.页面具体内容的宽高最好设置。这样按比例的属性会导致在不同分辨率下的排版出现问题（比如1920跟1366）。需要实现根据浏览器大小变化从而页面内容同样缩放思想实现：1.使用css中的。监听方法，监听尺寸变化从而调用缩放相关方法。这样的具体属性，如果设置。获取操作应该也是一样的。
vue3自定义v-resize缩放指令
YUlangML的博客
04-21 961
【代码】vue3自定义v-resize缩放指令。
vue 中监听窗口发生变化，切换页面触发监听事件window.addEventListener(‘resize‘，fn)报错
super_xxy的博客
09-28 1841
在首页使用echart监听窗口变化window.addEventListener(‘resize’，fn)重画echart，切换页面的时候没有销毁全局监听，导致其他页面无法获取echart的属性而报错。报错信息：Uncaught TypeError: Cannot read property ‘getAttribute’ of null。在离开页面的时候销毁，不然会一直存在，容易造成内存泄漏。
vue3 echarts resize自适应报错解决
weixin_44133581的博客
06-26 635
不要用data去存储 echarts 实例，可能会报错 undefined ...type...* 使用同一个resize监听事件。
扫盲-----addEventlistener()方法，事件监听(一)
热门推荐
yangchunshang的博客
06-04 5万+
一、扫盲事件起因    时间：2018年6月1日周五下午，原本我以为我已经把当前的bug改好，应该没啥问题了，坐等下班公司聚餐（开心）突然，隔壁同组大哥，哎。。。。cp,你看看，你这个首页报了很多错哎。我的第一反应就是，不可能，怎么会有错误呢，我明明都自己测过好几次了。我一看，我去，果然。。。。首页报的错误都是在我写的组件里面出现的同一个错误。我的天。。。。。当页面缩放时，渲染页面提示,某方法不存...
window.onresize 与 window.addEventListener(‘resize‘,...) 区别
前端技术
01-14 7594
一、背景说明 Vue 中，两个组件都使用的了 window.onresize 导致其中一个被覆盖。 二、冲突写法 window.onresize = () => { return (() => { yourResizeFunc(); })(); }; 三、正确写法 window.addEventListener('resize',() => yourResizeFunc(), false); window.addEventListener('resize',(
调整浏览器窗口大小的事件
weixin_52212950的博客
03-04 2888
淘宝网在页面缩小过程中会将中间的商品栏隐藏掉，这就用到了浏览器窗口的事件 window.addEventListener( 'resize', function() { }) 只要浏览器窗口发生变化就会触发该事件，window.innerWidth 是获取当前浏览器的页面宽度 window.addEventListener('resize',function(){ console.log(window.innerWidth); }) 可以看出当拖动浏..
window.addEventListener('resize
09-18
window.addEventListener('resize'是用于给窗口的大小改变事件添加监听器的方法。通常情况下，我们可以通过监听resize事件来实现对窗口大小变化的处理逻辑。在Vue项目中，可以通过在mounted生命周期钩子中使用window.addEventListener('resize'，在beforeDestroy生命周期钩子中使用window.removeEventListener('resize'来添加和移除resize事件的监听。具体操作如下所示： 引用: mounted() { window.addEventListener('resize', () => { // 窗口大小变化时的处理逻辑 }); }, beforeDestroy() { window.removeEventListener('resize'); } 而根据引用的说法，如果传递给addEventListener的function参数不是匿名函数，也可以使用removeEventListener来移除监听。在Vue项目中，可以将要监听的函数定义在methods选项中，然后再进行添加和移除监听的操作。具体操作如下所示： 引用: methods: { listenResizeFn() { // 窗口缩放时要处理的逻辑操作 } }, mounted() { // 添加监听事件listenResizeFn window.addEventListener('resize', this.listenResizeFn); }, beforeDestroy() { // 移除绑定的listenResizeFn事件监听 window.removeEventListener('resize', this.listenResizeFn); } 同时，引用中提到，只要浏览器窗口发生变化，就会触发resize事件。可以通过window.innerWidth来获取当前浏览器的页面宽度。具体操作如下所示： 引用: window.addEventListener('resize', function() { console.log(window.innerWidth); });

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值