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. 风水 青铜   风水  

    强啊,大牛