vue子組件中使用window.onresize()只執(zhí)行一次問題

更新時間：2024年08月10日 16:57:48 作者：小三金

這篇文章主要介紹了vue子組件中使用window.onresize()只執(zhí)行一次問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

描述

做了個簡單的echarts組件，其中有個功能是當(dāng)窗口變化時，刷新echarts。

用了window.onresize()，且用了防抖方法，但是一個頁面中會有多處用到echarts的組件，重點(diǎn)是當(dāng)將窗口拖拽時，卻只執(zhí)行了一次。

window.onresize = () => {
                delay(function () {
                    //防抖重畫                    
                    _this.handleDispose()
                    _this.handleDraw()
                }, 500)
            }

解決方案

使用 window.addEventListener('resize',function(){})

window.addEventListener('resize', _this.handleReDraw)

區(qū)別：

window.addEventListener():為每個事件指定一個回調(diào)函數(shù)去處理，簡單說，以我這個組件為例，是為每個組件都指定了一個回調(diào)函數(shù)處理
window.onresize():是統(tǒng)一用一個回調(diào)去去處理，簡單說，N個子組件都用了一個同一個函數(shù)去處理，所以，只能最后一個子組件好用，因?yàn)楹笳吒采w了前面的方法

tips：

根據(jù)你的業(yè)務(wù)邏輯，別忘了removeEventListener()，否則它會一直監(jiān)聽
如果你的是后臺管理系統(tǒng)，且有多頁tabs功能(開多頁功能)，那么你要監(jiān)聽下route并做好除去監(jiān)聽方法，否則它也會一直監(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)

    },
    //離開頁面時執(zhí)行
    destroyed () {
        const _this = this

        //移除監(jiān)聽
        window.removeEventListener('resize', _this.handleReDraw)
    },
...

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)本地存儲添加刪除修改功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)本地存儲添加刪除修改功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
vue+SpringBoot使用WebSocket方式
WebSocket是一種全雙工通信協(xié)議,通過HTTP升級機(jī)制建立連接,支持實(shí)時雙向數(shù)據(jù)傳輸,示例代碼展示了如何在Java Spring Boot和Vue.js中實(shí)現(xiàn)WebSocket服務(wù)和客戶端
2025-02-02
vue升級之路之vue-router的使用教程
自動安裝的vue-router，會在src 文件夾下有個一個 router -> index.js 文件在 index.js 中創(chuàng)建 routers 對象，引入所需的組件并配置路徑。這篇文章主要介紹了vue-router的使用,需要的朋友可以參考下
2018-08-08
nginx+vite項(xiàng)目打包以及部署的詳細(xì)過程
我們使用nginx部署Vue項(xiàng)目,實(shí)質(zhì)上就是將Vue項(xiàng)目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于nginx+vite項(xiàng)目打包以及部署的相關(guān)資料,需要的朋友可以參考下
2023-01-01
vue項(xiàng)目中定時器無法清除的原因解決
頁面有定時器,并且定時器在離開頁面時,有清除,本文主要介紹了vue項(xiàng)目中定時器無法清除的原因解決,具有一定的參考價值,感興趣的可以了解一下
2024-02-02
vue中預(yù)覽zip的實(shí)現(xiàn)示例
打包壓縮成zip的東西,再解壓,很麻煩,本文主要介紹了vue中預(yù)覽zip的實(shí)現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下
2023-09-09
vue3 provide與inject的使用小技巧分享
這篇文章主要介紹了vue3 provide與inject的使用小技巧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue移動端下拉刷新和上滑加載
這篇文章主要為大家詳細(xì)介紹了vue移動端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
學(xué)習(xí)Vite的原理
這篇文章主要介紹了Vite的原理，Vite是一個更輕、更快的web應(yīng)用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下
2022-02-02
Vue CLI2升級至Vue CLI3的方法步驟
這篇文章主要介紹了Vue CLI2升級至Vue CLI3的方法步驟,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05