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

daihai1994

于 2022-01-26 11:11:46 发布

阅读量1.4k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/daihai1994/article/details/122697535

版权

在Vue.js项目中使用ElementUi时遇到一个问题，当页面滚动时，select组件会随滚动条移动并覆盖其他内容。通过创建并引入一个名为`fakeClickOutSide.js`的JavaScript文件，在App.vue中应用相关解决方案，可以有效防止select框超出其容器并避免遮挡页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

在这里插入图片描述
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

最低0.47元/天解锁文章