ant-vue1.78版监听a-modal遮罩层的滚动事件

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