美文网首页
【vue】监听组件滚动+element-ui隐藏select框

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

作者: Q小予o0 | 来源:发表于2021-01-19 14:32 被阅读0次

    解决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)
            });
        },
    

    相关文章

      网友评论

          本文标题:【vue】监听组件滚动+element-ui隐藏select框

          本文链接:https://www.haomeiwen.com/subject/qfgqzktx.html