vue在mounted中window.onresize不生效問(wèn)題及解決
更新時(shí)間：2022年04月19日 09:18:39 作者：王維璋
這篇文章主要介紹了vue中在mounted中window.onresize不生效問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
mounted中window.onresize不生效
在vue開(kāi)發(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被覆蓋問(wèn)題
多個(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)聽(tīng)
? ? const _this = this
? ? window.addEventListener('resize', () => {
? ? ? if (_this.chart) {
? ? ? ? _this.chart.resize()
? ? ? }
? ? })以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解基于vue-cli3快速發(fā)布一個(gè)fullpage組件
這篇文章主要介紹了詳解基于vue-cli3快速發(fā)布一個(gè)fullpage組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要介紹了解讀vue項(xiàng)目防范XSS攻擊問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
解決ElementUI中tooltip出現(xiàn)無(wú)法顯示的問(wèn)題
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無(wú)法顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue3的自定義hook函數(shù)使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue基礎(chǔ)之v-bind屬性、class和style用法分析
這篇文章主要介紹了vue基礎(chǔ)之v-bind屬性、class和style用法,結(jié)合實(shí)例形式分析了vue.js中v-bind綁定及class、style樣式控制相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
深入理解使用Vue實(shí)現(xiàn)Context-Menu的思考與總結(jié)
這篇文章主要介紹了使用Vue實(shí)現(xiàn)Context-Menu的思考與總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
VUE el-tree組件左邊勾選，右邊清除交互問(wèn)題
這篇文章主要介紹了VUE el-tree組件左邊勾選，右邊清除交互問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
vue3項(xiàng)目使用pinia狀態(tài)管理器的使用
Pinia是一個(gè)專為Vue3設(shè)計(jì)的現(xiàn)代化狀態(tài)管理庫(kù),本文主要介紹了vue3項(xiàng)目使用pinia狀態(tài)管理器的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
elementui?el-table底層背景色修改簡(jiǎn)單方法
最近在做項(xiàng)目的時(shí)候遇到個(gè)需求,需要修改el-table背景色,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于elementui?el-table底層背景色修改的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11