问题描述

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

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

思路分析

  • 我们知道,就前端而言,弹出层是一个非常基础的效果功能
  • 目前市面上我们所使用的开源组件库的,但凡涉及到弹出层功能的,比如dropdownTooltipSelect的弹出层,基本上都是在Popper.js的基础之上封装的
  • vue2版本中vue团队基于Popper.js封装了一个vue-popper组件
  • 而饿了么团队又基于vue-popper组件去封装成各个带有弹出层的组件功能
  • PS:前端组件就是不停的封装(套壳子)...
  • 笔者也曾经基于vue-popper组件封装了一个属于自己的tooltip,大家有空了也可以点击链接去瞅瞅
  • 文章地址:https://segmentfault.com/a/1190000042463083
  • 既然Autocomplete组件的弹出层出现了错位的问题,那么本质上来说,还是源头上Popper.js的问题
  • 因为弹出层的位置,是Popper.js计算出来的
  • 所以,当弹出层位置错位的时候,我们只需要让Popper.js重新计算一下位置就能恢复正常了

  • Popper.js的源代码中有监听resize事件,从而计算出对应的弹出层位置
  • 笔者去github上扒了一下popper.js的源代码,简单截图如下:

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

解决方案

  1. 当我们的弹出层位置不对的时候
  2. 我们只需要再次派发一个resize事件即可
  3. 因为Popper.js监听了resize事件,会自动计算的,相当于钩子函数
  4. 需要让Popper.js重新计算一下就能“罗汉归位”
  5. 如何去派发一个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事件哦

水冗水孚
1.1k 声望587 粉丝

每一个不曾起舞的日子,都是对生命的辜负