vue子組件中使用window.onresize()只執(zhí)行一次問題
更新時(shí)間：2024年08月10日 16:57:48 作者：小三金
這篇文章主要介紹了vue子組件中使用window.onresize()只執(zhí)行一次問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
描述
做了個(gè)簡單的echarts組件，其中有個(gè)功能是當(dāng)窗口變化時(shí)，刷新echarts。
用了window.onresize()，且用了防抖方法，但是一個(gè)頁面中會(huì)有多處用到echarts的組件，重點(diǎn)是當(dāng)將窗口拖拽時(shí)，卻只執(zhí)行了一次。
window.onresize = () => {
delay(function () {
//防抖重畫
_this.handleDispose()
_this.handleDraw()
}, 500)
}解決方案
使用 window.addEventListener('resize',function(){})
window.addEventListener('resize', _this.handleReDraw)區(qū)別：
- window.addEventListener():為每個(gè)事件指定一個(gè)回調(diào)函數(shù)去處理，簡單說，以我這個(gè)組件為例，是為每個(gè)組件都指定了一個(gè)回調(diào)函數(shù)處理
- window.onresize():是統(tǒng)一用一個(gè)回調(diào)去去處理，簡單說，N個(gè)子組件都用了一個(gè)同一個(gè)函數(shù)去處理，所以，只能最后一個(gè)子組件好用，因?yàn)楹笳吒采w了前面的方法
tips：
- 根據(jù)你的業(yè)務(wù)邏輯，別忘了removeEventListener()，否則它會(huì)一直監(jiān)聽
- 如果你的是后臺(tái)管理系統(tǒng)，且有多頁tabs功能(開多頁功能)，那么你要監(jiān)聽下route并做好除去監(jiān)聽方法，否則它也會(huì)一直監(jiān)聽
watch: {
options (newVal, oldVal) {
let _this = this
if (newVal) {
_this.init()
}
},
$route: {
handler: function (route) {
const _this = this
if (route.name != "Index") {
//移除監(jiān)聽
window.removeEventListener('resize', _this.handleReDraw)
} else {
//監(jiān)聽窗口變化
window.addEventListener('resize', _this.handleReDraw)
}
},
immediate: true,
},
},
...
// 頁面初始化
created () { },
// 頁面DOM加載完成
mounted () {
let _this = this
_this.init()
//監(jiān)聽窗口變化
window.addEventListener('resize', _this.handleReDraw)
},
//離開頁面時(shí)執(zhí)行
destroyed () {
const _this = this
//移除監(jiān)聽
window.removeEventListener('resize', _this.handleReDraw)
},
...總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)本地存儲(chǔ)添加刪除修改功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)本地存儲(chǔ)添加刪除修改功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
WebSocket是一種全雙工通信協(xié)議,通過HTTP升級(jí)機(jī)制建立連接,支持實(shí)時(shí)雙向數(shù)據(jù)傳輸,示例代碼展示了如何在Java Spring Boot和Vue.js中實(shí)現(xiàn)WebSocket服務(wù)和客戶端2025-02-02
自動(dòng)安裝的vue-router，會(huì)在src 文件夾下有個(gè)一個(gè) router -> index.js 文件 在 index.js 中創(chuàng)建 routers 對(duì)象，引入所需的組件并配置路徑。這篇文章主要介紹了vue-router的使用,需要的朋友可以參考下2018-08-08
nginx+vite項(xiàng)目打包以及部署的詳細(xì)過程
我們使用nginx部署Vue項(xiàng)目,實(shí)質(zhì)上就是將Vue項(xiàng)目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于nginx+vite項(xiàng)目打包以及部署的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue項(xiàng)目中定時(shí)器無法清除的原因解決
頁面有定時(shí)器,并且定時(shí)器在離開頁面時(shí),有清除,本文主要介紹了vue項(xiàng)目中定時(shí)器無法清除的原因解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
打包壓縮成zip的東西,再解壓,很麻煩,本文主要介紹了vue中預(yù)覽zip的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
這篇文章主要介紹了vue3 provide與inject的使用小技巧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了Vite的原理，Vite是一個(gè)更輕、更快的web應(yīng)用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02
這篇文章主要介紹了Vue CLI2升級(jí)至Vue CLI3的方法步驟,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05