关于ElementUi中select框在页面滚动时el-option超出元素区域的问题

问题：在项目开发中发现elementUi中的select组件在页面滚动时会随着页面滚动并遮盖页面，如下图：

遇到这问题首先想到的是组件是否有相关设置属性，发现popper-append-to-body属性发现不行。

在网上找到了相关的解决办法，在下面贴出来！！！

1、创建js文件

// fackClickOutSide.js

let lock = true;
let el = null;
const MousedownEvent = new Event('mousedown', {bubbles:true});
const MouseupEvent = new Event('mouseup', {bubbles:true});
const fakeClickOutSide = () => {
  document.dispatchEvent(MousedownEvent);
  document.dispatchEvent(MouseupEvent);
  lock = true; // console.log('dispatchEvent');
};
const mousedownHandle = e => {
  let classList = e.target.classList;
  if(classList.contains('el-select__caret') || classList.contains('el-input__inner')) {
    lock = false;
    return;
  }
  if(lock) return;
  fakeClickOutSide();
};
const mousewheelHandle = e => {
  if(lock || e.target.classList.contains('el-select-dropdown__item') || e.target.parentNode.classList.contains('el-select-dropdown__item')) return;
  fakeClickOutSide();
};
const eventListener = (type) => {
  el[type + 'EventListener']('mousedown', mousedownHandle);
  window[type + 'EventListener']('mousewheel', mousewheelHandle);
  window[type + 'EventListener']('DOMMouseScroll', mousewheelHandle); // fireFox 3.5+ 
}
export default {
  mounted() {
    el = this.$root.$el;
    el.addFakeClickOutSideEventCount = el.addFakeClickOutSideEventCount || 0;
    (! el.addFakeClickOutSideEventCount) && this.$nextTick(() => {
      eventListener('add');
    });
    el.addFakeClickOutSideEventCount += 1;
  },
  destroyed() {
    eventListener('remove');
    el.addFakeClickOutSideEventCount -= 1;
  },
}

2、使用

//  App.vue

本文转载自：https://www.codercto.com/a/82953.html