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. 咖啡之家 青铜   咖啡之家  

    厉害!厉害!厉害!

  2. 奥斯本 青铜   奥斯本  

    厉害!厉害!厉害!

  3. 咖啡之家 青铜   咖啡之家  

    强!强!强!

  4. 咖啡之家 青铜   咖啡之家  

    为何如此优秀

  5. 咖啡之家 青铜   咖啡之家  

    路过,顺便点赞

  6. 经典句子大全 青铜   经典句子大全  

    厉害!厉害!厉害!

  7. 咖啡之家 青铜   咖啡之家  

    哎呦,不错喔!

  8. 经典句子大全 青铜   经典句子大全  

    为何如此优秀

  9. 网站建设 青铜   网站建设  

    厉害!厉害!厉害!

  10. 贝壳健康网 青铜   贝壳健康网  

    哎呦,不错喔!