监听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();},}