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

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

 

遇到这问题首先想到的css,但是没有知道好的解决方法,

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

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、使用

// 在页面中使用mixins混入使用

 

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