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

    强啊,大牛