监听a-modal遮罩层的滚动事件
我们开发过程中经常有遇到监听页面滚动的事件需求,去做一些下拉加载或者是下拉分页的需求,我们直接在vue的生命周期中去绑定事件监听非常的方便,但如果是弹框的遮罩层的滚动监听呢?页面的监听完全是不起作用的,我们需要怎么办?看看我的场景
我们可以看到弹框过大,右侧已经出现了滚动条,然后左边的下拉框由于随着遮罩层滚动条的滚动,下拉项的列表脱离了原有的位置,就很丑,没有跟随下拉菜单移动,这也许是ant的缺陷,这个时候我们需要监听遮罩层的滚动,及时的让下拉菜单失焦就可以解决这个问题,由于页面加载时弹框是没有出现的,明显是没有遮罩层的我们监听不到,监听时机很重要,上代码
watch: {
//我们监听弹框的开关
visible(nVal) {
if (nVal) {
//打开弹框时,在$nextTick里拿到遮罩层的dom,然后监听滚动事件
this.$nextTick(() => {
this.oDiv = document.getElementsByClassName('ant-modal-wrap ')[0];
this.oDiv.addEventListener('scroll', this.handleScroll);
});
}
},
},
methods: {
//解决弹框滚动时,下拉菜单飘移的问题
handleScroll() {
//通过短路与兼容语法 主动让表单失焦
this.$refs.selectcompany && this.$refs.selectcompany.blur();
this.$refs.selectAttr && this.$refs.selectAttr.blur();
},
}