vue - 滑动页面使el-select的选择项不超出页面而自动隐藏

mounted() {
      console.log('mounted');
      let that = this;
      window.addEventListener('scroll', function (e) {
        that.scrollFunc();
      }, true);
    },
    destroyed() {
      window.removeEventListener('scroll', this.scrollFunc);
    },
    methods: {
      scrollFunc() {
        // let header = document.getElementsByClassName('has-gutter')[0];
        let header = $('.has-gutter');
        let header_offset = header.offset();
        let header_top = +header_offset.top + 50;
        if(this.select === undefined || this.select === null || this.select === ''){
          return false;
        }
        let ref = this.$refs[this.select.id][0] || null;
        $('.el-select-dropdown').each(function (e) {
          if($(this).css('display') === 'none'){
          }else{
            let el_select_dropdown = this;
            let el_select_dropdown_offset_top = el_select_dropdown.offsetTop;
            if(+el_select_dropdown_offset_top <= +header_top){
              console.log('小于了');
              ref && ref.blur();
              // $(this).css('display', 'none');
              // ref.$refs.input.blur();
            }
          }
        });
      },
}

<el-select v-if="flag"
                   ref="select"
                   v-model="value"
                   clearable
                   filterable
                   placeholder="请选择"
                   :popper-append-to-body="true"
                   @focus="selectFocus"
                   @change="dealData">
            <el-option
                    v-for="item in dutyData"
                    :key="item.value"
                    :label="item.shiftName"
                    :value="item.shiftId">
            </el-option>
        </el-select>

methods: {
            blur() {
                this.$refs.select.blur();
            },
}
返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论

25 条评论
  1. fm分享网 青铜   fm分享网  

    哎呦,不错喔!

  2. 手表资讯 青铜   手表资讯  

    为何如此优秀

  3. 手表资讯 青铜   手表资讯  

    博主牛逼!

  4. 氏组词 青铜   氏组词  

    给博主点赞!

  5. 太阳的资料 青铜   太阳的资料  

    加鸡腿,加鸡腿,加鸡腿

  6. 周易算命 青铜   周易算命  

    给博主点赞!

  7. 中国玄学 青铜   中国玄学  

    给博主点赞!

  8. 李铁拐 青铜   李铁拐  

    路过,顺便点赞

  9. 在线阅读 青铜   在线阅读  

    为何如此优秀

  10. 婚礼 青铜   婚礼  

    为何如此优秀