el-time-select位置出现偏移的情况:窗口出现滚动条,如图:
出现问题的原因
el-time-select的下拉框是插入body中,且定位是filxd定位,出现滚动条后,基于窗口定位的下拉框就会出现如上图所示的位置偏移情况。
遇到的困难
在翻阅官方文档后发现el-time-select组件并没有el-select组件相同的popper-append-to-body属性,这也就说明el-time-select组件出现的位置偏移情况不能像el-select组件位置偏移情况一样去处理。
解决思路
使用了js来处理这个bug,代码如下:
一、我们在组件上添加获取焦点事件getTop,获取事件对象getTop($event)
<el-time-select
@focus="getTop($event)"
style="width:calc(70% / 2)"
:editable="false"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00',
}">
</el-time-select>
二、getTop函数内容如下
getTop(e){
// 获取事件触发的元素距离可视窗口的顶部距离 + 元素自身的高度
let top = e.$el.getBoundingClientRect().top + 30 + 'px'
// 之所以使用定时器是因为,元素渲染需要一点时间
setTimeout(()=>{
// 获取正在显示的下拉框
let down = document.querySelector('div[x-placement]')
// 设置定位为绝对定位(基于body)
down.style.position = 'absolute'
// 设置与顶部的距离
down.style.top = top
// 获取所有隐藏的下拉框
let panel = document.querySelectorAll('.el-picker-panel')
// 循环给所有隐藏下拉框更改样式
for(var i =0;i<panel.length;i++){
panel[i].style.position = 'absolute'
panel[i].style.top = top
}
})
},