快捷導(dǎo)航

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

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

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

描述

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

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

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

解決方案

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

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

區(qū)別：

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

tips：

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

 watch: {
        options (newVal, oldVal) {
            let _this = this
            if (newVal) {
                _this.init()
            }
        },
        $route: {
            handler: function (route) {
                const _this = this

                if (route.name != "Index") {
                    //移除監(jiān)聽(tīng)
                    window.removeEventListener('resize', _this.handleReDraw)
                } else {
                    //監(jiān)聽(tīng)窗口變化
                    window.addEventListener('resize', _this.handleReDraw)
                }

            },
            immediate: true,
        },
    },

... 
// 頁(yè)面初始化
    created () { },
    // 頁(yè)面DOM加載完成
    mounted () {
        let _this = this
        _this.init()

        //監(jiān)聽(tīng)窗口變化
        window.addEventListener('resize', _this.handleReDraw)

    },
    //離開(kāi)頁(yè)面時(shí)執(zhí)行
    destroyed () {
        const _this = this

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