vue在mounted中window.onresize不生效問題及解決
mounted中window.onresize不生效
在vue開發(fā)中,因?yàn)橐玫母附M件和子組件都使用了window.onresize以至于一個(gè)window.onresize失效。
解決方案
可以采用下面的方式
window.onresize = () => this.screenWidth = window.innerWidth?
// 改為以下寫法
window.addEventListener('resize', () => this.screenWidth = window.innerWidth, false)window.onresize被覆蓋問題
多個(gè)子組件中都存在window.onresize時(shí),后一個(gè)會(huì)把前一個(gè)覆蓋,導(dǎo)致之前的onresize都失效。
? ? const _this = this
? ? window.onresize = function() {
? ? ? if (_this.chart) {
? ? ? ? _this.chart.resize()
? ? ? }
? ? }解決方案
使用addEventListener方法添加監(jiān)聽
? ? const _this = this
? ? window.addEventListener('resize', () => {
? ? ? if (_this.chart) {
? ? ? ? _this.chart.resize()
? ? ? }
? ? })以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli-service不是內(nèi)部或外部命令,也不是可運(yùn)行的程序或批處理文件問題
在Vue項(xiàng)目構(gòu)建過程中,如果遇到無法識(shí)別'vue-cli-service'命令的錯(cuò)誤提示,通常是因?yàn)闆]有全局安裝vue-cli,解決這個(gè)問題的步驟主要包括:首先檢查Vue版本,如果未安裝則先安裝Vue;其次全局安裝vue-cli;若在安裝過程中遇到cnpm命令找不到的情況2024-10-10
Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用
這篇文章主要介紹了Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
使用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取吧2023-08-08
Vue elementui字體圖標(biāo)顯示問題解決方案
這篇文章主要介紹了Vue elementui字體圖標(biāo)顯示問題解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明
這篇文章主要介紹了vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明,具有很好的參考價(jià)值,希望大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08

