elementPlus中的Autocomplete弹出层错位问题解决分析

问题描述

• 在饿了么UI中有一个Autocomplete搜索建议输入框组件，一般这个组件是用于做远程关联搜索的（类似百度一下咱们输入一个字，会提示出相关的选择建议）
• 可是在某些情况下，这个Autocomplete组件的弹出层部分会出现错位的情况（Autocomplete组件 = 输入框部分 + 弹出层部分）
• 就像下面的这个效果图

对于这样的错位问题，笔者提供一个偏向于源头的写法，能够快速解决问题

思路分析

• 我们知道，就前端而言，弹出层是一个非常基础的效果功能
• 目前市面上我们所使用的开源组件库的，但凡涉及到弹出层功能的，比如dropdown、Tooltip、Select的弹出层，基本上都是在Popper.js的基础之上封装的
• vue2版本中vue团队基于Popper.js封装了一个vue-popper组件
• 而饿了么团队又基于vue-popper组件去封装成各个带有弹出层的组件功能
• PS：前端组件就是不停的封装（套壳子）...
• 笔者也曾经基于vue-popper组件封装了一个属于自己的tooltip，大家有空了也可以点击链接去瞅瞅

文章地址：https://www.jb51.net/javascript/29319297k.htm

• 既然Autocomplete组件的弹出层出现了错位的问题，那么本质上来说，还是源头上Popper.js的问题
• 因为弹出层的位置，是Popper.js计算出来的
• 所以，当弹出层位置错位的时候，我们只需要让Popper.js重新计算一下位置就能恢复正常了

• Popper.js的源代码中有监听resize事件，从而计算出对应的弹出层位置

popper.js的源代码

笔者去github上扒了一下popper.js的源代码，简单截图如下：

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

解决方案

• 当我们的弹出层位置不对的时候
• 我们只需要再次派发一个resize事件即可
• 因为Popper.js监听了resize事件，会自动计算的，相当于钩子函数
• 需要让Popper.js重新计算一下就能“罗汉归位”
• 如何去派发一个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就是监听resize事件重新计算dom位置的)
        window.dispatchEvent(new Event('resize'))
    }, 340);
}

 注意，要在合适的时机去派发resize事件哦

以上就是elementPlus中的Autocomplete弹出层错位问题解决分析的详细内容，更多关于elementPlus Autocomplete弹出层错位的资料请关注脚本之家其它相关文章！

最新评论