页面滚动时隐藏element-ui下拉框/时间弹框

场景

在系统中，当（有垂直滚动时）点击下拉框后滚动页面，会发现下拉项会遮盖住页面中的元素，不会隐藏
 

解决：(以vue为例)

在页面滚动或者缩放时隐藏下拉项即可（借助点击目标元素，下拉项会自动隐藏的特点）

案例代码：

<template><div class="wrapper"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-select v-model="value2" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-select v-model="value3" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-select v-model="value4" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</template>
<script>export default {data() {return {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: '',value1: '',value2: '',value3: '',value4: '',rules: {},mouseUp: null,mouseDown: null};},mounted() {this.$nextTick(() => {let scrollDom = document.querySelectorAll('.wrapper')[0];// 滚动监听的容器是scrollDom或者window下，在哪个下监听哪个window.addEventListener('scroll', () => {this.scrollHide('.el-select-dropdown');}, false);})},methods: {// 隐藏popperhidePopper(cls = '.el-popper') {const dom = document.querySelector(cls);console.log(cls, dom, 9999999);if( !dom ){ return; }// 创建鼠标事件if (!this.mouseUp || !this.mouseDown) {console.log('-----create events-----');this.mouseUp = new MouseEvent('mouseup', { 'view': window, 'bubbles': true, 'cancelable': true });this.mouseDown = new MouseEvent('mousedown', { 'view': window, 'bubbles': true, 'cancelable': true });}// 顺序触发mouseDown、mouseUpdom.dispatchEvent(this.mouseDown);dom.dispatchEvent(this.mouseUp);},// 清除鼠标事件delEvents() {console.log('-----delete events-----');this.mouseUp = null;this.mouseDown = null;},/*** 滚动时隐藏* @param cls 隐藏的元素class:如下拉、时间弹框等*/scrollHide(cls) {if( this.mouseUp || this.mouseDown ) { this.delEvents(); } // 先移除this.hidePopper(cls);},submitForm(formName) {},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script><style lang="less">
.wrapper {width: 100%;height: 2000px;
}
</style>

主要逻辑代码：

1、监听当前滚动元素的scroll事件

// window或当前滚动元素的dom节点  
// 滚动监听的容器 滚动容器是哪个就监听哪个
// let scrollDom = document.querySelectorAll('.wrapper')[0];
// scrollDom下滚动或者window下滚动
window.addEventListener('scroll', () => {this.scrollHide('.el-select-dropdown');
}, false);

2、定义滚动监听的容器

/*** 滚动时隐藏* @param cls 隐藏的元素class:如下拉、时间弹框等
*/
scrollHide(cls) {if( this.mouseUp || this.mouseDown ) { this.delEvents(); } // 先移除this.hidePopper(cls);
},

3、隐藏popper

hidePopper(cls = '.el-popper') {const dom = document.querySelector(cls);console.log(cls, dom, 9999999);if( !dom ){ return; }// 创建鼠标事件if (!this.mouseUp || !this.mouseDown) {console.log('-----create events-----');this.mouseUp = new MouseEvent('mouseup', { 'view': window, 'bubbles': true, 'cancelable': true });this.mouseDown = new MouseEvent('mousedown', { 'view': window, 'bubbles': true, 'cancelable': true });}// 顺序触发mouseDown、mouseUpdom.dispatchEvent(this.mouseDown);dom.dispatchEvent(this.mouseUp);
},

4、清除鼠标事件

delEvents() {console.log('-----delete events-----');this.mouseUp = null;this.mouseDown = null;
},

使用：

1、隐藏下拉项

// 如果是el-table中的select，则监听的dom为.el-table__body-wrapper
// 如果是在自定义的元素里，则监听的dom为自定义滚动的元素 如 .wrapper
window.addEventListener('scroll', () => {this.scrollHide('.el-select-dropdown');
}, false);

2、隐藏时间弹框

// 如果是el-table中的select，则监听的dom为.el-table__body-wrapper
// 如果是在自定义的元素里，则监听的dom为自定义滚动的元素 如 .wrapperwindow.addEventListener('scroll', () => {this.scrollHide('.el-date-range-picker');
}, false);