問題描述

• 在餓了么UI中有一個Autocomplete搜索建議輸入框組件，一般這個組件是用于做遠程關聯(lián)搜索的（類似百度一下咱們輸入一個字，會提示出相關的選擇建議）
• 可是在某些情況下，這個Autocomplete組件的彈出層部分會出現(xiàn)錯位的情況（Autocomplete組件 = 輸入框部分 + 彈出層部分）
• 就像下面的這個效果圖

對于這樣的錯位問題，筆者提供一個偏向于源頭的寫法，能夠快速解決問題

思路分析

• 我們知道，就前端而言，彈出層是一個非?；A的效果功能
• 目前市面上我們所使用的開源組件庫的，但凡涉及到彈出層功能的，比如dropdown、Tooltip、Select的彈出層，基本上都是在Popper.js的基礎之上封裝的
• vue2版本中vue團隊基于Popper.js封裝了一個vue-popper組件
• 而餓了么團隊又基于vue-popper組件去封裝成各個帶有彈出層的組件功能
• PS：前端組件就是不停的封裝（套殼子）...
• 筆者也曾經(jīng)基于vue-popper組件封裝了一個屬于自己的tooltip，大家有空了也可以點擊鏈接去瞅瞅

文章地址：http://www.dbjr.com.cn/javascript/29319297k.htm

• 既然Autocomplete組件的彈出層出現(xiàn)了錯位的問題，那么本質(zhì)上來說，還是源頭上Popper.js的問題
• 因為彈出層的位置，是Popper.js計算出來的
• 所以，當彈出層位置錯位的時候，我們只需要讓Popper.js重新計算一下位置就能恢復正常了

• Popper.js的源代碼中有監(jiān)聽resize事件，從而計算出對應的彈出層位置

popper.js的源代碼

筆者去github上扒了一下popper.js的源代碼，簡單截圖如下：

所以解決方案就有啦...

解決方案

• 當我們的彈出層位置不對的時候
• 我們只需要再次派發(fā)一個resize事件即可
• 因為Popper.js監(jiān)聽了resize事件，會自動計算的，相當于鉤子函數(shù)
• 需要讓Popper.js重新計算一下就能“羅漢歸位”
• 如何去派發(fā)一個resize事件呢？很簡單：

window.dispatchEvent(new Event('resize'))

window.dispatchEvent(new Event('resize'))

window.dispatchEvent(new Event('resize'))

比如以下代碼demo：

const querySearchAsync = (queryString, cb) => {
    setTimeout(() => {
        let apiData = [
            {
                value: '孫悟空',
                id: '111'
            },
            {
                value: '豬八戒',
                id: '222'
            },
            {
                value: '沙和尚',
                id: '333'
            },
        ]
        cb(apiData)
        // 解決el-autocomplete彈出建議層錯位問題(poper.js就是監(jiān)聽resize事件重新計算dom位置的)
        window.dispatchEvent(new Event('resize'))
    }, 340);
}

 注意，要在合適的時機去派發(fā)resize事件哦

以上就是elementPlus中的Autocomplete彈出層錯位問題解決分析的詳細內(nèi)容，更多關于elementPlus Autocomplete彈出層錯位的資料請關注腳本之家其它相關文章！

最新評論