element-ui滚动组件关闭下拉菜单的问题总结

element-ui滚动组件关闭下拉菜单的问题

一、问题说明

目前前端项目中有一个现象是在一个弹窗或者页面中，滚动鼠标内容跟随滚动，打开的下拉菜单也跟随滚动，超出部分显示很不合理，测试同事提过相关问题的bug单，但因为时间问题只是修改了单个页面，这个问题属于全局性问题，所以这次把整改的思路整理一下：先看图

![在这里插入图片描述](https://img-/2024155732677.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjI5NDg0NA==,size_16,color_FFFFFF,t_70

二：描述问题

由于下拉菜单包含（s-select-dropdown、s-time-pane1、s-picker-pane1、下拉菜单、自定义的下拉等），含有默认层级z-index，高出s-dialog的层级，故滚动鼠标时会超出弹窗或页面，引起显示问题。注： element-ui也有这个问题

二：解决方案

1：修改弹窗组件层级，让他高于下拉组件菜单的层级（这个方案想过，but…因为下拉组件的层级不一定，而且所有下拉是通过position: absolue，绝对定位的方法写的，超出弹窗，但页面的层级也依然会显示）

position定位是相对于父级而言的，页面的层级不好控制，也会引起其他相应bug，故放弃。

2：增加自定义指令事件v-dialogClose，在给需要,组件关闭地方添加，可以，但是弹窗太多，工作量太大，放弃。

3：我的方案：

a: 所有的问题都是因为滚动鼠标引起的，所以从s-scrollbar组件入手

b: outSideClick参数是个布尔值，默认为true，默认滚动事件发生时关闭下拉，（弹窗太多），不需要关闭的outSideClick=“false”,就可以了

c: 监听滚动事件，判断outSideClick为true时，执行以下代码：

closeAllDropDown() { // 滚动鼠标 关闭所有下拉显示框const SELECTWRAP_BODY = document.body // bodyconst SELECTWRAP_DOWNALL = document.querySelectorAll('.s-select-dropdown') // select下拉框const SELECTWRAP_TIMEALL = document.querySelectorAll('.s-time-panel') // 时间下拉框const SELECTWRAP_DATEALL = document.querySelectorAll('.s-picker-panel') // 日期下拉框SELECTWRAP_BODY.click()SELECTWRAP_DOWNALL.forEach((item) => {item.style.display = 'none'})SELECTWRAP_TIMEALL.forEach((item) => {item.style.display = 'none'})SELECTWRAP_DATEALL.forEach((item) => {item.style.display = 'none'})},