window.onresize在vue中只能使用一次,自适应resize报错问题
更新时间：2023年10月21日 15:07:02 作者：虎鲸大大
这篇文章主要介绍了window.onresize在vue中只能使用一次,自适应resize报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
window.onresize在vue中只能使用一次,自适应resize报错
1.window.onresize不能重复使用
因为onresize是一个回调，当它发生变化时，会覆盖前一个
2.但是有业务场景需要多个组件进行监听
此时可以使用
window.addEventListener('resize',()=>{})3.移除监听
window.removeEventListener('resize',函数名)
4.写echars自适应时报错找不到resize
使用了this，
第一次是在mounted生命周期函数中实例化echarts对象，this是指向VueComponent组件，就是柱状图的div；
第二次是在window监听事件中监听窗口尺寸的自适应，this则是指向监听对象，也就是window，但是在这里需要的是在window的监听对象中对柱状图div进行自适应操作。
解决办法：
去掉this，使用变量代替
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现登录功能的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这篇文章主要介绍了发布订阅模式在vue中的实际运用,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了用electron打包vue项目中的报错问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
基于vue.js轮播组件vue-awesome-swiper实现轮播图
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。接下来通过本文给大家详解讲解vue.js轮播组件vue-awesome-swiper实现轮播图实例代码，需要的朋友参考下2017-03-03
在Vue中,深度监听是一种非常常见且重要的功能,它可以让我们监听对象内部的所有属性,并对这些属性的变化做出相应的处理,在本篇博客中,我将为大家介绍Vue中如何实现深度监听的方法,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了el-table树形数据量过大,导致页面卡顿问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue3使用vue-router及路由权限拦截方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
这篇文章主要介绍了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了Vue2.0父子组件传递函数的教程详解,需要的朋友可以参考下2017-10-10
组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,下面这篇文章主要给大家介绍了关于vue如何动态加载组件的相关资料,需要的朋友可以参考下2022-10-10
最新评论