vue在mounted中window.onresize不生效問題及解決
更新時間:2022年04月19日 09:18:39 作者:王維璋
這篇文章主要介紹了vue中在mounted中window.onresize不生效問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
mounted中window.onresize不生效
在vue開發(fā)中,因為引用的父組件和子組件都使用了window.onresize以至于一個window.onresize失效。
解決方案
可以采用下面的方式
window.onresize = () => this.screenWidth = window.innerWidth? // 改為以下寫法 window.addEventListener('resize', () => this.screenWidth = window.innerWidth, false)
window.onresize被覆蓋問題
多個子組件中都存在window.onresize時,后一個會把前一個覆蓋,導(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() ? ? ? } ? ? })
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解基于vue-cli3快速發(fā)布一個fullpage組件
這篇文章主要介紹了詳解基于vue-cli3快速發(fā)布一個fullpage組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03解決ElementUI中tooltip出現(xiàn)無法顯示的問題
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無法顯示的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03vue基礎(chǔ)之v-bind屬性、class和style用法分析
這篇文章主要介紹了vue基礎(chǔ)之v-bind屬性、class和style用法,結(jié)合實例形式分析了vue.js中v-bind綁定及class、style樣式控制相關(guān)操作技巧,需要的朋友可以參考下2019-03-03深入理解使用Vue實現(xiàn)Context-Menu的思考與總結(jié)
這篇文章主要介紹了使用Vue實現(xiàn)Context-Menu的思考與總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03