window.onresize在vue中只能使用一次,自適應resize報錯問題
更新時間：2023年10月21日 15:07:02 作者：虎鯨大大
這篇文章主要介紹了window.onresize在vue中只能使用一次,自適應resize報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
window.onresize在vue中只能使用一次,自適應resize報錯
1.window.onresize不能重復使用
因為onresize是一個回調(diào)，當它發(fā)生變化時，會覆蓋前一個
2.但是有業(yè)務場景需要多個組件進行監(jiān)聽
此時可以使用
window.addEventListener('resize',()=>{})3.移除監(jiān)聽
window.removeEventListener('resize',函數(shù)名)
4.寫echars自適應時報錯找不到resize
使用了this，
第一次是在mounted生命周期函數(shù)中實例化echarts對象，this是指向VueComponent組件，就是柱狀圖的div；
第二次是在window監(jiān)聽事件中監(jiān)聽窗口尺寸的自適應，this則是指向監(jiān)聽對象，也就是window，但是在這里需要的是在window的監(jiān)聽對象中對柱狀圖div進行自適應操作。
解決辦法：
去掉this，使用變量代替
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue實現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
訂閱發(fā)布模式定義了一種一對多的依賴關系，讓多個訂閱者對象同時監(jiān)聽某一個主題對象。這篇文章主要介紹了發(fā)布訂閱模式在vue中的實際運用,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了用electron打包vue項目中的報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
基于vue.js輪播組件vue-awesome-swiper實現(xiàn)輪播圖
一般做移動端輪播圖的時候，最常用的就是Swiper插件了，而vue.js也有一個輪播組件vue-awesome-swiper，用法跟swiper相似。接下來通過本文給大家詳解講解vue.js輪播組件vue-awesome-swiper實現(xiàn)輪播圖實例代碼，需要的朋友參考下2017-03-03
Vue中實現(xiàn)深度監(jiān)聽的方法小結(jié)
在Vue中,深度監(jiān)聽是一種非常常見且重要的功能,它可以讓我們監(jiān)聽對象內(nèi)部的所有屬性,并對這些屬性的變化做出相應的處理,在本篇博客中,我將為大家介紹Vue中如何實現(xiàn)深度監(jiān)聽的方法,需要的朋友可以參考下2024-09-09
el-table樹形數(shù)據(jù)量過大,導致頁面卡頓問題及解決
這篇文章主要介紹了el-table樹形數(shù)據(jù)量過大,導致頁面卡頓問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue3使用vue-router及路由權(quán)限攔截方式
這篇文章主要介紹了vue3使用vue-router及路由權(quán)限攔截方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教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父子組件傳遞函數(shù)的教程詳解,需要的朋友可以參考下2017-10-10
組件是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關于vue如何動態(tài)加載組件的相關資料,需要的朋友可以參考下2022-10-10