elementPlus中的Autocomplete彈出層錯(cuò)位問(wèn)題解決分析

更新時(shí)間：2023年07月25日 14:36:34 作者：水冗水孚

這篇文章主要介紹了elementPlus中的Autocomplete彈出層錯(cuò)位問(wèn)題解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

問(wèn)題描述

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

對(duì)于這樣的錯(cuò)位問(wèn)題，筆者提供一個(gè)偏向于源頭的寫(xiě)法，能夠快速解決問(wèn)題

思路分析

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

文章地址：http://www.fzitv.net/javascript/29319297k.htm

既然Autocomplete組件的彈出層出現(xiàn)了錯(cuò)位的問(wèn)題，那么本質(zhì)上來(lái)說(shuō)，還是源頭上Popper.js的問(wèn)題
因?yàn)閺棾鰧拥奈恢茫荘opper.js計(jì)算出來(lái)的
所以，當(dāng)彈出層位置錯(cuò)位的時(shí)候，我們只需要讓Popper.js重新計(jì)算一下位置就能恢復(fù)正常了

Popper.js的源代碼中有監(jiān)聽(tīng)resize事件，從而計(jì)算出對(duì)應(yīng)的彈出層位置

popper.js的源代碼

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

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

解決方案

當(dāng)我們的彈出層位置不對(duì)的時(shí)候
我們只需要再次派發(fā)一個(gè)resize事件即可
因?yàn)镻opper.js監(jiān)聽(tīng)了resize事件，會(huì)自動(dòng)計(jì)算的，相當(dāng)于鉤子函數(shù)
需要讓Popper.js重新計(jì)算一下就能“羅漢歸位”
如何去派發(fā)一個(gè)resize事件呢？很簡(jiǎn)單：

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彈出建議層錯(cuò)位問(wèn)題(poper.js就是監(jiān)聽(tīng)resize事件重新計(jì)算dom位置的)
        window.dispatchEvent(new Event('resize'))
    }, 340);
}

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

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

您可能感興趣的文章: