vue elementui select下拉库组件鼠标移出时隐藏下拉框

方案:

select 监听 mouseleave事件,当鼠标离开时通过唯一标识ref设置select 下拉框隐藏,并做失焦

html 复制代码
<el-select 
v-model="value" 
:popper-append-to-body="false"   
class="select_drop_inner" size="small"
placeholder="支持模型体验" 
ref="selectRef" 
@mouseleave.native="closeSelect">
  <el-option label="xxx" value="xxx"></el-option>
  <el-option label="xxx" value="xxx"></el-option>
</el-select>

popper-append-to-body 属性是设置弹出框的位置的,设置为false比较方便我们通过当前select去获取对应的下拉框元素,如果设置为true的话对应下拉框元素会在最外层,不方便拿到并设置

但是设置当前属性也会导致出现下拉框被盖住不显示的样式问题

如果有这样的样式问题可以给select设置单独的class,然后设置以下的scss

css 复制代码
.select_drop_inner {
    padding-bottom: 0.2rem;  //为下方的下拉框保留位置(20px)
    position: relative;
    top: 0.1rem; //兼容之前的样式,可以不加
    .el-select__tags {
        top: calc(50% - 0.1rem);
    }
    .el-select-dropdown {
        position: fixed !important;  //主要是修改下拉框为固定定位来解决不显示问题
        top: 3.2rem !important;  //上方的高度需自己计算(相关整个页面视口)

    }
}

mouseleave事件方法中做操作

javascript 复制代码
closeSelect(){
   // 注意 selectRef 要和 ref="selectRef" 对应
   this.$refs.selectRef.$el.querySelector('.el-select-dropdown').style.display = 'none';
   // 隐藏下拉框后 同时 使 input 失去焦点
   this.$refs.selectRef.blur()
 },

参考至 https://blog.csdn.net/Z18834071903/article/details/138799731

相关推荐
OpenGL5 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0221 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang22 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景24 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼25 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿27 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再29 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55533 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录38 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000039 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试