Скрыть раскрывающийся список element-ui/всплывающее окно времени при прокрутке страницы

Сцены

В системе при прокрутке страницы после нажатия на раскрывающийся список (при наличии вертикальной прокрутки) вы обнаружите, что раскрывающийся элемент закроет элементы на странице, а не скроется
 

Решение: (возьмем vue в качестве примера)

Просто скройте раскрывающийся элемент при прокрутке или масштабировании страницы (при нажатии на целевой элемент раскрывающийся элемент будет автоматически скрыт)

Код дела:

<template>
  <div class="wrapper">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="即时配送" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-select v-model="value2" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-select v-model="value3" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item label="活动形式" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-select v-model="value4" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        rules: {
        },
        mouseUp: null,
        mouseDown: null
      };
    },
    mounted() {
      this.$nextTick(() => {
        let scrollDom = document.querySelectorAll('.wrapper')[0];
        // 滚动监听的容器是scrollDom或者window下，在哪个下监听哪个
        window.addEventListener('scroll', () => {
          this.scrollHide('.el-select-dropdown');
        }, false);
      })
    },
    methods: {
      // 隐藏popper
      hidePopper(cls = '.el-popper') {
        const dom = document.querySelector(cls);
        console.log(cls, dom, 9999999);
        if( !dom ){ return; }
        // 创建鼠标事件
        if (!this.mouseUp || !this.mouseDown) {
          console.log('-----create events-----');
          this.mouseUp = new MouseEvent('mouseup', { 'view': window, 'bubbles': true, 'cancelable': true });
          this.mouseDown = new MouseEvent('mousedown', { 'view': window, 'bubbles': true, 'cancelable': true });
        }
        // 顺序触发mouseDown、mouseUp
        dom.dispatchEvent(this.mouseDown);
        dom.dispatchEvent(this.mouseUp);
      },
      // 清除鼠标事件
      delEvents() {
        console.log('-----delete events-----');
        this.mouseUp = null;
        this.mouseDown = null;
      },
      /**
      * 滚动时隐藏
      * @param cls 隐藏的元素class:如下拉、时间弹框等
      */
      scrollHide(cls) {
        if( this.mouseUp || this.mouseDown ) { this.delEvents(); } // 先移除
        this.hidePopper(cls);
      },


      submitForm(formName) {
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="less">
.wrapper {
  width: 100%;
  height: 2000px;
}
</style>

Код основной логики:

1. Слушайте событие прокрутки текущего элемента прокрутки

// window或当前滚动元素的dom节点  
// 滚动监听的容器 滚动容器是哪个就监听哪个
// let scrollDom = document.querySelectorAll('.wrapper')[0];
// scrollDom下滚动或者window下滚动
window.addEventListener('scroll', () => {
   this.scrollHide('.el-select-dropdown');
}, false);

2. Определите контейнер для мониторинга прокрутки

/**
 * 滚动时隐藏
 * @param cls 隐藏的元素class:如下拉、时间弹框等
*/
scrollHide(cls) {
  if( this.mouseUp || this.mouseDown ) { this.delEvents(); } // 先移除
  this.hidePopper(cls);
},

3. Спрячьте поппер

hidePopper(cls = '.el-popper') {
   const dom = document.querySelector(cls);
   console.log(cls, dom, 9999999);
   if( !dom ){ return; }
   // 创建鼠标事件
   if (!this.mouseUp || !this.mouseDown) {
      console.log('-----create events-----');
      this.mouseUp = new MouseEvent('mouseup', { 'view': window, 'bubbles': true, 'cancelable': true });
      this.mouseDown = new MouseEvent('mousedown', { 'view': window, 'bubbles': true, 'cancelable': true });
    }
    // 顺序触发mouseDown、mouseUp
    dom.dispatchEvent(this.mouseDown);
    dom.dispatchEvent(this.mouseUp);
},

4. Очистить события мыши

delEvents() {
   console.log('-----delete events-----');
   this.mouseUp = null;
   this.mouseDown = null;
},

использовать:

1. Скрыть выпадающие элементы

// 如果是el-table中的select，则监听的dom为.el-table__body-wrapper
// 如果是在自定义的元素里，则监听的dom为自定义滚动的元素 如 .wrapper
window.addEventListener('scroll', () => {
    this.scrollHide('.el-select-dropdown');
}, false);

2. Скрыть поле с маркером времени

// 如果是el-table中的select，则监听的dom为.el-table__body-wrapper
// 如果是在自定义的元素里，则监听的dom为自定义滚动的元素 如 .wrapper

window.addEventListener('scroll', () => {
    this.scrollHide('.el-date-range-picker');
}, false);