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)文章
本篇文章主要介紹了VueJS如何引入css或者less文件的一些坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
vue-cli-service不是內(nèi)部或外部命令,也不是可運行的程序或批處理文件問題
在Vue項目構(gòu)建過程中,如果遇到無法識別'vue-cli-service'命令的錯誤提示,通常是因為沒有全局安裝vue-cli,解決這個問題的步驟主要包括：首先檢查Vue版本,如果未安裝則先安裝Vue；其次全局安裝vue-cli；若在安裝過程中遇到cnpm命令找不到的情況2024-10-10
這篇文章主要介紹了vue導(dǎo)出excel文件流中文亂碼問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用
這篇文章主要介紹了Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
使用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取吧2023-08-08
這篇文章主要介紹了vue中使用微信公眾號js-sdk踩坑記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了Vue elementui字體圖標顯示問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了vue3中如何實現(xiàn)定義全局變量，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明
這篇文章主要介紹了vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明，具有很好的參考價值，希望大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08