element-ui滚动组件关闭下拉菜单的问题
一、问题说明
目前前端项目中有一个现象是在一个弹窗或者页面中,滚动鼠标内容跟随滚动,打开的下拉菜单也跟随滚动,超出部分显示很不合理,测试同事提过相关问题的bug单,但因为时间问题只是修改了单个页面,这个问题属于全局性问题,所以这次把整改的思路整理一下:先看图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201224155732677.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 // body
const 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'
})
},