需求:
页面上方的筛选框使用了el-select组件,并且整体页面有滚动条。如打开了下拉框,往下滑动页面时,下拉框则需要自动关闭掉。
实现html代码:
1.在el-select上添加个ref。通过refs来获取el-select,并且用blur方法关闭掉下拉框。
<el-form
ref="formRef"
:model="formData"
label-width="100px"
label-position="top"
size="small"
element-loading-spinner="el-icon-loading"
class="custom-form custom-scroll"
>
<el-form-item label="工号">
<el-select
size="small"
v-model="formData.jobId"
popper-class="NL-select job-select"
placeholder="请选择"
clearable
filterable
:popper-append-to-body="false"
class="inlineSelect"
ref="positionRef"
@change="handleChoosePosition"
>
<el-option
v-for="item in optionList.jobList"
:key="item.jobId"
:label="item.jobData"
:value="item.jobId"
>
{{item.name}
</el-option>
</el-select>
</el-form-item>
</el-form>
实现JS代码:
1. 先要监听到页面滚动的区域,我使用了弹窗组件,所以我是在打开弹窗时的方法添加了监听。 (formRef 是我给el-form的ref名称,我页面的滚动是写在el-form上,所以要找到这个位置)
// 打开弹窗的方法 监听滚动的区域
openDialog() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.formRef.$el.addEventListener(
"scroll",
this.autoCloseVisible
);
});
},
// 列表滑动下方时,隐藏el-select选择框的内容
autoCloseVisible() {
this.$refs.positionRef.blur();
}
// 关闭弹窗-取消监听
beforeClose() {
this.$refs.formRef.$el.removeEventListener(
"scroll",
this.autoCloseVisible
);
}