【vue】监听组件滚动+element-ui隐藏select框

解决element-ui的组件el-select层级太高的问题

image.png

监听组件滚动

当需要组件模块化来渲染一个页面时，如果要监听当前组件的scroll事件，使用window.addEventListener('srcoll')是无效的，
所以对当前组件采用监听滚动事件。

在mounted中，监听当前的滚动事件，然后进行相应的操作.

  mounted () {
    this.onscroll()
  }

view中对应的滚动box加上ref

<div class="bd" ref="viewBox"></div>

methods中写对应的滚动方法。

onscroll() {
        this.$nextTick(function() {
          // 监听当前组件的滚动事件
          this.box = this.$refs.viewBox;
          this.box.addEventListener('scroll', ()=> {
            // select组件层级太高，滚动隐藏
            if(this.$refs.viewBox.scrollTop > 0) {
               this.$refs.mySelect.handleClose()
            }
          },false)
        });
    },