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