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();
            },
}
返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论

12 条评论
  1. 氏组词 青铜   氏组词  

    给博主点赞!

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

    加鸡腿,加鸡腿,加鸡腿

  3. 周易算命 青铜   周易算命  

    给博主点赞!

  4. 中国玄学 青铜   中国玄学  

    给博主点赞!

  5. 李铁拐 青铜   李铁拐  

    路过,顺便点赞

  6. 在线阅读 青铜   在线阅读  

    为何如此优秀

  7. 婚礼 青铜   婚礼  

    为何如此优秀

  8. 结婚吉日 青铜   结婚吉日  

    哎呦,不错喔!

  9. 百度真垃圾 青铜   百度真垃圾  

    给博主点赞!

  10. 百度真乖 青铜   百度真乖  

    路过,顺便点赞