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.js實(shí)現(xiàn)數(shù)字拼圖游戲
為了進(jìn)一步讓大家了解Vue.js的神奇魅力，了解Vue.js的一種以數(shù)據(jù)為驅(qū)動(dòng)的理念，本文主要利用Vue實(shí)現(xiàn)了一個(gè)數(shù)字拼圖游戲，其原理并不是很復(fù)雜，下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)。2016-08-08
前端vue項(xiàng)目打包成桌面端exe應(yīng)用的簡單步驟
Electron是一個(gè)開源的框架,用于構(gòu)建跨平臺(tái)的桌面應(yīng)用程序,這篇文章主要介紹了前端vue項(xiàng)目打包成桌面端exe應(yīng)用的簡單步驟,文中給出詳細(xì)的代碼示例,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了vue下拉列表功能實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue 部署上線清除瀏覽器緩存的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解
今天小編就為大家分享一篇vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue2?this直接獲取data和methods原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Vue3響應(yīng)式陷阱之對(duì)象引用丟失導(dǎo)致的數(shù)據(jù)更新失效的解決方法
最近在開發(fā)一個(gè)表單配置功能時(shí),遇到了一個(gè)詭異的 Bug：明明在函數(shù)中成功賦值了,console.log 也打印出了正確的值,但頁面上就是不顯示,經(jīng)過一番排查,發(fā)現(xiàn)這是一個(gè)典型的 Vue 響應(yīng)式陷阱,今天分享出來,希望能幫到遇到類似問題的同學(xué),需要的朋友可以參考下2025-11-11
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
這篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家分享了vue多級(jí)多選菜單組件開發(fā)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明
這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09