elinput内容过长显示悬浮框_Element-ui中元素滚动时el-option超出元素区域的问题

本文主要讨论了在Element-ui Select组件中,当elinput内容过长导致的悬浮框显示问题。分析了原因,包括popperEl的z-index、事件处理等,并提出了三种解决方案。方案一尝试通过CSS解决,但效果有限;方案二尝试监听$root的scroll事件,但scroll事件不支持冒泡;最终选择了方案三,通过自定义混合(mixin)处理mousedown和mousewheel事件,实现在滚动时关闭悬浮框。这种方法在常规基础用法和自定义模板用法下均表现良好,但也存在一些潜在问题和改进的空间。
摘要由CSDN通过智能技术生成

复现场景, 看图

分析原因

为简单起见, 把选项区域描述为popperEl

popperEl的z-index 比较大, 会覆盖在其他元素上面

popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body)

popperEl是在mouseup事件里去做隐藏逻辑的, 而按下鼠标, 移动滚动条的时候, 并没有触发mouseup事件.

popperEl并没有监听滚动事件(没法监听, 也没必要监听)

解决方案

方案一

我最初想到的解决方案是通过css解决,通过popper-class属性给Select下拉框添加类名,然后用css来做, 试了一下这个方案并不可行(只能在某些特定的场景下起作用),遂放弃,可能最优雅最高性能的方法就是用css来搞定, 有踩过这个坑的朋友请指点一下

方案二

通过监听$root的scroll事件,利用事件冒泡,只需要在根元素上添加scroll事件的监听就可以了, 测试一番之后, 发现scroll事件根本不支持冒泡, event.bubbles为false)。

方案三

通过查看element-ui 的select.vue, 发现控制popperEl显隐的是visible 和 emptyText这两个实例属性, 很明显, emptytext是不能动的, 只能在visible上动手脚了. 这里放一小段源码

name="el-zoom-in-top"

@before-enter="handleMenuEnter"

@after-leave="doDestroy">

ref="po

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值